React映射渲染按钮时，如何为onClick添加第二函数并实现动态类切换

1. 添加第二个点击函数 #

要在同一个onClick事件里执行多个函数，直接在箭头函数体内依次调用即可。如果逻辑简单，可直接写在事件回调里；如果逻辑复杂，封装成单独的处理函数会更清晰：

// 方式1：直接在onClick内调用多个函数
onClick={() => {
  filter(e);
  yourSecondFunction(e, i); // 第二个自定义函数，可按需传参
}}

// 方式2：封装成单独处理函数（更易维护）
const handleBtnClick = (item, index) => {
  filter(item);
  yourSecondFunction(item, index);
};
// 调用时直接传参
onClick={() => handleBtnClick(e, i)}

2. 实现类名切换（动态外观） #

要实现按钮的选中态切换，需要在组件内部维护一个状态记录当前选中的按钮索引：

• 用useState声明状态，初始值设为-1（表示无选中按钮）
• 渲染按钮时，判断当前索引是否匹配状态值，动态添加选中类名
• 点击按钮时更新状态，同时执行预设的点击逻辑

修改后的完整代码 #

import { useState } from 'react';

function ButtonsDes({ button, filter }) {
  // 记录当前选中按钮的索引
  const [activeIndex, setActiveIndex] = useState(-1);

  // 统一处理点击逻辑：状态更新 + 多函数执行
  const handleBtnClick = (item, index) => {
    filter(item);
    // 这里替换成你的第二个函数逻辑，示例为打印信息
    console.log(`触发第二个函数：按钮文本${item}，索引${index}`);
    // 点击同一按钮可取消选中，不需要的话直接写setActiveIndex(index)
    setActiveIndex(prev => prev === index ? -1 : index);
  };

  return (
    <div className="planet__btn">
      {button.map((e, i) => (
        <button
          type="button"
          onClick={() => handleBtnClick(e, i)}
          key={i}
          // 动态切换类名，假设active是你定义的选中样式类
          className={activeIndex === i ? 'active' : ''}
        >
          {e}
        </button>
      ))}
    </div>
  );
}

export default ButtonsDes;

补充提示 #

• 如果按钮有固定基础类名，可拼接成className={btn-default ${activeIndex === i ? 'active' : ''}}
• 第二个函数可根据业务需求调整，比如发送请求、修改其他组件状态等

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