EventDispatchCase.js — react Source File

Source Code

import TestCase from '../../TestCase';
import Fixture from '../../Fixture';

const React = window.React;
const {Fragment, useRef, useState} = React;

function WrapperComponent(props) {
  return props.children;
}

const initialState = {
  child: false,
  parent: false,
  grandparent: false,
};

export default function EventListenerCase() {
  const fragmentRef = useRef(null);
  const [clickedState, setClickedState] = useState({...initialState});
  const [fragmentEventFired, setFragmentEventFired] = useState(false);
  const [bubblesState, setBubblesState] = useState(true);

  function setClick(id) {
    setClickedState(prev => ({...prev, [id]: true}));
  }

  function fragmentClickHandler(e) {
    setFragmentEventFired(true);
  }

  return (
    <TestCase title="Event Dispatch">
      <TestCase.Steps>
        <li>
          Each box has regular click handlers, you can click each one to observe
          the status changing through standard bubbling.
        </li>
        <li>Clear the clicked state</li>
        <li>
          Click the "Dispatch click event" button to dispatch a click event on
          the Fragment. The event will be dispatched on the Fragment's parent,
          so the child will not change state.
        </li>
        <li>
          Click the "Add event listener" button to add a click event listener on
          the Fragment. This registers a handler that will turn the child blue
          on click.
        </li>
        <li>
          Now click the "Dispatch click event" button again. You can see that it
          will fire the Fragment's event handler in addition to bubbling the
          click from the parent.
        </li>
        <li>
          If you turn off bubbling, only the Fragment's event handler will be
          called.
        </li>
      </TestCase.Steps>

      <TestCase.ExpectedResult>
// ... (98 more lines)