ReactJS中如何为Button的onClick事件添加两个函数？

你可以通过以下几种方式实现同一个按钮点击时触发多个函数：

• 直接在箭头函数中调用两个函数
  这是最直观的方式，点击按钮时会依次执行两个函数：

  <Button onClick={() => {
    submitHandler();
    Toggle();
  }}>
  

  如果函数需要传递参数，直接在调用时传入即可，比如 submitHandler(formData)。

• 封装成单独的处理函数
  把多个操作封装成一个新的函数，让代码结构更清晰，也方便后续复用或修改：

  // 在组件内部定义合并后的处理函数
  const handleButtonClick = () => {
    submitHandler();
    Toggle();
  };
  
  // 按钮上使用这个新函数
  <Button onClick={handleButtonClick}>
  

• 处理异步函数的顺序（可选）
  如果其中某个函数是异步操作，且需要等待它执行完成后再执行另一个函数，可以用 async/await：

  const handleButtonClick = async () => {
    await submitHandler(); // 等待submitHandler执行完成
    Toggle();
  };
  

内容的提问来源于stack exchange，提问作者apotamkinn