React中如何让同一组件的onClick触发多个事件？

你遇到的问题是无法在onClick中同时执行setToggle和handleRotate，原因是onClick属性只能接收单个函数作为参数，不能直接用AND连接两个函数。下面提供两种可行的解决方法：

方法一：使用匿名函数直接调用两个函数 #

在onClick中定义一个匿名函数，在函数体内依次调用需要执行的两个方法：

<ArrowRight onClick={() => {
  setToggle();
  handleRotate();
}} style={{ transform: rotate }}>
  <img className='arrow-right' src={process.env.PUBLIC_URL +"/images/newsAndPress/arrow-right.png"}/>
</ArrowRight>

方法二：定义单独的组合事件函数 #

先在组件内部定义一个整合了两个操作的函数，再将这个函数传给onClick，这种方式更利于代码复用和维护：

// 在组件内部添加组合函数
const handleArrowClick = () => {
  setToggle();
  handleRotate();
};

// JSX中使用
<ArrowRight onClick={handleArrowClick} style={{ transform: rotate }}>
  <img className='arrow-right' src={process.env.PUBLIC_URL +"/images/newsAndPress/arrow-right.png"}/>
</ArrowRight>

完整修改后的代码示例 #

import { useState } from 'react';

function FAQs() {    
    function useToggle(initialState = false) {
        const [toggleValue, setToggleValue] = useState(initialState);
        const toggler = () => {
          setToggleValue(!toggleValue);
        };
        return [toggleValue, toggler];
      }
    const [toggle, setToggle] = useToggle();

    const [rotateArrow, setRotateArrow] = useState(false);
    const handleRotate = () => setRotateArrow(!rotateArrow);
    const rotate = rotateArrow ? "rotate(90deg)" : "rotate(0)";

    const handleArrowClick = () => {
        setToggle();
        handleRotate();
    };

    return (
        <>
            <Question>First question goes here </Question>
            <ArrowRight onClick={handleArrowClick} style={{ transform: rotate }}>
                <img className='arrow-right' src={process.env.PUBLIC_URL +"/images/newsAndPress/arrow-right.png"}/>
            </ArrowRight>
            {toggle && ( 
                <Answer><p>"Question 1 Answer, consectetuer adipiscing elit, sed diam ut laoreet dolore magna aliquam facilisi."</p></Answer>
            )}
        </>
    );
}

补充说明：给useToggle添加了默认初始值false，避免初始状态为undefined导致的异常。两种方法都能实现点击箭头时，同时切换答案的显示状态和箭头的旋转效果。

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