EventMixed() — react Function Reference

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

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ EventMixed() — react Function Reference

Dependency Diagram

graph TD
  2fe297a1_bc8e_a0c2_c586_1ded62890a38["EventMixed()"]
  f361f511_643d_fef8_84d3_4e38e9129616["TextNodesCase.js"]
  2fe297a1_bc8e_a0c2_c586_1ded62890a38 -->|defined in| f361f511_643d_fef8_84d3_4e38e9129616
  style 2fe297a1_bc8e_a0c2_c586_1ded62890a38 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/TextNodesCase.js lines 342–378

function EventMixed() {
  return (
    <TestCase title="Event Operations - Mixed Content">
      <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 that the fragment's event listener fires</li>
        <li>Click directly on the element or text content to see bubbling</li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        Event operations work on fragments with mixed text and element content.
        dispatchEvent forwards to the parent element. Clicks on child elements
        or text bubble up through the DOM as normal.
      </TestCase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <EventFragmentContainer>
            Text node before element.
            <span
              style={{
                display: 'inline-block',
                padding: '5px 10px',
                margin: '0 5px',
                backgroundColor: 'lightblue',
                border: '1px solid blue',
              }}>
              Element
            </span>
            Text node after element.
          </EventFragmentContainer>
        </Fixture.Controls>
      </Fixture>
    </TestCase>
  );
}