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

但是，从最后两个开始，只有选项＃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的滥用。

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

1 个答案: