React 如何根据传入的按钮名动态修改对应hook的状态值

最优方案：聚合同类型状态为单个对象 #

你完全可以和类组件的实现逻辑对齐，把分散的4个按钮状态合并为一个对象类型的state，直接用计算属性动态更新对应键值即可：

import { useState } from 'react'

// 初始化状态，默认值可替换为你需要的基础按钮类名
const [btnClass, setBtnClass] = useState({
  btn1: 'btn',
  btn2: 'btn',
  btn3: 'btn',
  btn4: 'btn'
})

// 点击事件处理逻辑
const handleClick = (e) => {
  const buttonName = e.target.name
  // 这里可以加你自己的对错判断逻辑，动态赋值success/error类名
  const targetClass = 你的判断逻辑 ? 'btn-success' : 'btn-danger'
  
  setBtnClass(prev => ({
    // 保留其他按钮的状态
    ...prev,
    // 动态更新当前点击按钮的类名
    [buttonName]: targetClass
  }))
}

渲染按钮时直接从状态对象取值即可：

<button name="btn1" className={btnClass.btn1} onClick={handleClick}>选项1</button>
<button name="btn2" className={btnClass.btn2} onClick={handleClick}>选项2</button>
<button name="btn3" className={btnClass.btn3} onClick={handleClick}>选项3</button>
<button name="btn4" className={btnClass.btn4} onClick={handleClick}>选项4</button>

这种方案的扩展性最强，后续如果新增选项只需要在初始化状态里加对应键即可，不需要额外声明新的state。

次选方案：不改动现有状态声明的前提下用映射表简化 #

如果你不想修改现有的setBtn1/setBtn2等状态声明，可以用映射表替代冗余的if判断：

// 提前建立按钮标识和对应setter的映射关系
const btnSetterMap = {
  1: setBtn1,
  2: setBtn2,
  3: setBtn3,
  4: setBtn4
}

// 提取点击按钮的数字标识
const btnNum = button.match(/\d+/)[0]
// 直接调用对应setter，可选链做容错处理
btnSetterMap[btnNum]?.('btn-success')

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