如何将事件对象传递给React事件处理函数？

Question

将event对象传递给事件处理函数的正确方法是什么？

事件处理程序：

// DOESN'T NEED ANY ARGUMENTS
function handleInnerDivClickWithoutArgument(event) {
  event.stopPropagation();
  console.log('>>> INNER DIV EVENT HANDLER WITHOUT ARGUMENT');
}

// NEEDS AN ARGUMENT 'msg'
function handleInnerDivClick(event,msg){
  //console.log(event);
  event.stopPropagation();
  console.log(msg);
}

选项1

如果事件处理程序不需要额外的参数，则始终可以执行以下操作：

<S.Inner_DIV1
  onClick={handleInnerDivClickWithoutArgument}
>

选项＃2

<S.Inner_DIV2
  onClick={ () => handleInnerDivClick(event, '>>> INNER DIV EVENT HANDLER')}
>

选项＃3

<S.Inner_DIV3
  onClick={ (event) => handleInnerDivClick(event, '>>> INNER DIV EVENT HANDLER')}
>

但是，从最后两个开始，只有Option＃3才能取消事件传播。 如您在代码段中所见， 选项2不会阻止传播。

题：

请注意， 这两个选项都可以 console.log(event) 。 这是为什么？ 这些事件有区别吗？ 将event对象传递给处理函数的正确方法是什么？为什么？

警告：代码段中的console.log(event)行已被注释掉，因为它需要一段时间才能运行（约10秒）。 我不知道为什么，但是确实如此。

 const styled = window.styled; const S = {}; S.Outer_DIV = styled.div` display: flex; `; S.Inner_DIV1 = styled.div` border: 1px solid black; `; S.Inner_DIV2 = styled.div` border: 1px solid black; `; S.Inner_DIV3 = styled.div` border: 1px solid black; `; function App() { function handleInnerDivClick(event,msg){ //console.log(event); event.stopPropagation(); console.log(msg); } function handleInnerDivClickWithoutArgument(event) { event.stopPropagation(); console.log('>>> INNER DIV EVENT HANDLER WITHOUT ARGUMENT'); } return ( <S.Outer_DIV onClick={()=>console.log('OUTER DIV EVENT HANDLER WAS CALLED!')}> <S.Inner_DIV1 onClick={handleInnerDivClickWithoutArgument} > S.Inner_DIV1 </S.Inner_DIV1> <S.Inner_DIV2 onClick={()=>handleInnerDivClick(event,'>>> INNER DIV EVENT HANDLER')} > S.Inner_DIV2 </S.Inner_DIV2> <S.Inner_DIV3 onClick={(event)=>handleInnerDivClick(event,'>>> INNER DIV EVENT HANDLER')} > S.Inner_DIV3 </S.Inner_DIV3> </S.Outer_DIV> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <script src="//unpkg.com/styled-components/dist/styled-components.min.js"></script> <div id="root"/> 

Answer 1

在选项＃1中，您实际上正在传递事件，因为您传递了函数对象，所以它大致等效于

<S.Inner_DIV1
  onClick={event => handleInnerDivClickWithoutArgument(event)}
>

因此与Option＃3非常相似。

在选项＃2中 ，您没有通过它。 就像您创建了一个没有任何参数的新函数，它大致等效于

function option2() {
  return handleInnerDivClick(event, '>>> INNER DIV EVENT HANDLER');
}
<S.Inner_DIV2
  onClick={option2}
>

如您所见， event未在函数option2的本地范围内定义，尽管在事件处理程序的上下文中event可能会回落到window.event 。

这不是特定于React的，只是对JavaScript的滥用。