EventListenerCase() — react Function Reference

Architecture documentation for the EventListenerCase() function in EventListenerCase.js from the react codebase.

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ EventListenerCase() — react Function Reference

Dependency Diagram

graph TD
  3bb4c3bf_864a_a6e2_7fed_937fceed6d49["EventListenerCase()"]
  51bfb37f_da4d_7046_3df6_4646dc9fa9e4["EventListenerCase.js"]
  3bb4c3bf_864a_a6e2_7fed_937fceed6d49 -->|defined in| 51bfb37f_da4d_7046_3df6_4646dc9fa9e4
  style 3bb4c3bf_864a_a6e2_7fed_937fceed6d49 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/EventListenerCase.js lines 12–74

export default function EventListenerCase() {
  const [extraChildCount, setExtraChildCount] = useState(0);

  return (
    <TestCase title="Event Registration">
      <TestCase.Steps>
        <li>
          Click "Add event listener" to attach a click handler to the fragment
        </li>
        <li>Click "Dispatch click event" to dispatch a click event</li>
        <li>Observe the event log showing the event fired</li>
        <li>Add a new child, dispatch again to see it still works</li>
        <li>
          Click "Remove event listener" and dispatch again to see no event fires
        </li>
      </TestCase.Steps>

      <TestCase.ExpectedResult>
        <p>
          Fragment refs can manage event listeners on the first level of host
          children. The event log shows when events are dispatched and handled.
        </p>
        <p>
          New child nodes will also have event listeners applied. Removed nodes
          will have their listeners cleaned up.
        </p>
      </TestCase.ExpectedResult>

      <Fixture>
        <Fixture.Controls>
          <div style={{marginBottom: '10px'}}>
            Target count: {extraChildCount + 3}
            <button
              onClick={() => {
                setExtraChildCount(prev => prev + 1);
              }}
              style={{marginLeft: '10px'}}>
              Add Child
            </button>
          </div>
          <EventFragmentContainer>
            <div className="card" id="child-a">
              Child A
            </div>
            <div className="card" id="child-b">
              Child B
            </div>
            <WrapperComponent>
              <div className="card" id="child-c">
                Child C
              </div>
              {Array.from({length: extraChildCount}).map((_, index) => (
                <div className="card" id={'extra-child-' + index} key={index}>
                  Extra Child {index}
                </div>
              ))}
            </WrapperComponent>
          </EventFragmentContainer>
        </Fixture.Controls>
      </Fixture>
    </TestCase>
  );
}