迹忆客 专注技术分享

在 React 中调用多个 onClick 函数：

1. 在元素上设置 onClick 属性。
2. 在事件处理函数中调用其他函数。
3. 事件处理函数可以根据需要调用尽可能多的其他函数。

export default function App() {
  const sum = (a, b) => {
    return a + b;
  };

  const multiply = (a, b) => {
    return a * b;
  };

  return (
    <div>
      <button
        onClick={event => {
          console.log('function 1:', sum(5, 5));
          console.log('function 2:', multiply(5, 5));
        }}
      >
        Click
      </button>
    </div>
  );
}

我们在按钮上设置了 onClick 属性，因此每次单击它时，都会调用提供的事件处理函数。

<button
  onClick={event => {
    console.log('function 1:', sum(5, 5));
    console.log('function 2:', multiply(5, 5));
  }}
>
  Click
</button>

事件处理函数将事件对象作为参数并调用 sum() 和 multiply() 函数。

我们可以使用此方法在单个事件处理程序中根据需要调用尽可能多的函数。

在 JSX 代码之外提取事件处理程序

另一种更易读的方法是在 JSX 代码之外提取事件处理函数。

export default function App() {
  const sum = (a, b) => {
    return a + b;
  };

  const multiply = (a, b) => {
    return a * b;
  };

  const handleClick = event => {
    console.log(event.target);

    console.log('function 1:', sum(5, 5));
    console.log('function 2:', multiply(5, 5));
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

每次单击按钮时，都会调用 handleClick 函数并将事件对象传递给它。

const handleClick = event => {
  console.log(event.target);

  console.log('function 1:', sum(5, 5));
  console.log('function 2:', multiply(5, 5));
};

我们可以根据需要在 handleClick 函数中调用尽可能多的其他函数。

如果任何函数需要将事件对象作为参数，请确保在调用中转发它。

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

<button onClick={handleClick}>Click</button>

如果将调用 handleClick 函数的结果传递给 onClick 属性，例如 onClick={handleClick()}，该函数会在页面加载时立即被调用，这不是我们想要的。