在 React 中传递事件和参数 onClick

作者

在 React 中传递事件和参数 onClick

Pass event and parameter onClick in React

在 React 中传递事件和参数 onClick：

  1. 将内联函数传递给onClick元素的 prop。
  2. 该函数应获取event对象并调用handleClick.
  3. 将事件和参数传递给handleClick.
应用程序.js
const App = () => {
  const handleClick = (event, param) => {
    console.log(event);
    console.log(param);
  };

  return (
    <div>
      <button onClick={event => handleClick(event, 'hello world')}>
        Click
      </button>
    </div>
  );
};

export default App;

反应 onclick 传递事件和参数

我们将onClick按钮元素上的属性设置为内联箭头函数。

箭头函数获取event对象并调用handleClick传递事件和参数的函数。

您可以使用这种方法将尽可能多的参数传递给您的事件处理函数。

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

应用程序.js
<button onClick={event => handleClick(event, 'hello world')}>
  Click
</button>

如果您在将函数传递给onClickprop 时调用该函数，例如
onClick={handleClick()}，它会在组件安装时立即被调用。

当一个函数被传递给onClickprop 时，它只会在事件被触发时被调用，并且它总是被event对象调用。

–

发表评论