迹忆客 专注技术分享

要在 React 中的 div 元素上设置 onClick 监听器：

1. 在 div 上设置 onClick 属性。
2. 每次单击 div 时，都会调用我们传递给 prop 的函数。
3. 我们可以通过 event.currentTarget 访问 div。

const App = () => {
  const handleClick = event => {
    // 👇️ refers to the div element
    console.log(event.currentTarget);

    console.log('div clicked');
  };

  return (
    <div>
      <div onClick={handleClick}>Hello world</div>
    </div>
  );
};

export default App;

我们在 div 元素上设置了 onClick 属性，因此每次单击该元素时，都会调用 handleClick 函数。

如果我们需要访问 handleClick 函数中的 div 元素，请访问事件对象的 currentTarget 属性。

事件的 currentTarget 属性使我们能够访问事件侦听器附加到的元素。

而事件的目标属性为我们提供了对触发事件的元素的引用（可能是后代）。

如果要将参数传递给 handleClick 函数，请将 onClick 属性设置为内联箭头函数。

const App = () => { const handleClick = (event, message) => { // 👇️ refers to the div element console.log(event.currentTarget); console.log(message); console.log('div clicked'); }; return ( <div> <div onClick={event => handleClick(event, 'hello')}>Hello world</div> </div> ); }; export default App;

注意 ，我们将一个函数传递给 onClick 属性，而不是调用的结果。

如果我们在将函数传递给 onClick 属性时调用该函数，例如 onClick={handleClick()}，它会在组件挂载时立即调用。

我们可以使用这种方法在任何其他元素上设置 onClick 属性，例如 button ，span 等。