如何让 React 先监听子组件中的事件而不是父组件？

Question

Consider this example

<div onClick={() => redirectTo('/foo')}>
  <input type="text"/>
  <input type="button" onClick={() => redirectTo('/bar')} />
</div>;

when i test this example in this case by click to second input , React always redirect to /foo, is that normal behavior and how can i make React redirect to /bar? Thanks a lot!

Answer 1

The click event is propagating from the input to the div and both redirects occur. You are seeing the result of the last redirect.

You can stop the propagation of the input's click event.

<div onClick={() => redirectTo('/foo')}>
  <input type="text"/>
  <input
    type="button"
    onClick={(e) => {
      e.stopPropagation();
      redirectTo('/bar');
    }}
  />
</div>;