在 React-Redux 中，如何仅单击父组件而不单击子组件？ [复制]答案

【问题标题】：In React-Redux, How to click only the parent component, but not the child one? [duplicate]在 React-Redux 中，如何仅单击父组件而不单击子组件？ [复制]
【发布时间】：2021-07-13 03:41:11
【问题描述】：

我将通过点击来调度一个动作。

export default function Example() {

  const dispatch = useDispatch()
  
  function dispatching() {
    dispatch(action)
  }

  return (
    <Parent onClick={dispatching}>
      <Child />
    </Parent>
  )

}

当我单击子项时，我希望什么都不会发生。但我想，由于冒泡，很难解决它。我认为它与 e.stopPropagation() 无关，因为当我想单击子项而不是父项时，这很有用。这是相反的情况。如果我感到困惑，我已经尝试过了，但它没有按预期工作。请帮帮我，谢谢。

【问题讨论】：

您想要捕获事件 - 这意味着它成为父级 -> 子级，而不是冒泡事件，这意味着它来自子级 -> 父级（默认行为）。当您捕获事件时，请执行相同的 stopPropagation 操作，它不会发送给孩子。

标签： javascript reactjs dom react-redux dom-events

【解决方案1】：

删除您在 onClick 中的间距。


export default function Example() {

  const dispatch = useDispatch()
  
  function dispatching() {
    dispatch(action)
  }

  return (
    <Parent onClick={dispatching}>
      <Child />
    </Parent>
  )

}

【讨论】：

虽然确实更干净，但如果您有空格并且也不能回答问题，它实际上可以工作。