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

Question

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

事件处理程序:

// 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')}
>

但是，从最后两个来看，只有选项#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)}
>

与选项#3非常相似。

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

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

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

这不是 React 特有的，它只是 JavaScript 的滥用。