在 React 中使用 onClick 调用多个函数

在 React 中，我们可以使用 onClick 属性来为元素添加点击事件。但是，当我们需要在一个元素上调用多个函数时，我们该如何实现呢？下面是两种方法：

方法一：在 onClick 中调用匿名函数

我们可以在 onClick 属性中定义一个匿名函数，然后在该函数内部调用多个函数。

import React from 'react';

function handleClick() {
  console.log('第一个函数');
}

function anotherHandleClick() {
  console.log('第二个函数');
}

function MyButton() {
  return (
    <button onClick={() => {
      handleClick();
      anotherHandleClick();
    }}>按钮</button>
  );
}

这里我们把两个函数都传给了匿名函数，然后在匿名函数的内部分别调用它们。

方法二：将多个函数封装成一个函数

我们可以将多个函数都封装在一个函数中，然后在 onClick 属性中调用该函数。

import React from 'react';

function handleClick() {
  console.log('第一个函数');
}

function anotherHandleClick() {
  console.log('第二个函数');
}

function combinedHandleClick() {
  handleClick();
  anotherHandleClick();
}

function MyButton() {
  return (
    <button onClick={combinedHandleClick}>按钮</button>
  );
}

这里我们创建了一个名为 combinedHandleClick 的函数，该函数内部先调用 handleClick，然后再调用 anotherHandleClick。然后我们把 combinedHandleClick 函数传给了 onClick 属性。

无论你选择哪种方法，都可以在 React 中实现在一个元素上调用多个函数。