在 React 中对 Div 元素使用 onClick

要在 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;

在 React 中对 Div 元素使用 onClick

我们在 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 等。