如何在useState Hook中管理多按钮点击状态，避免重复定义state

方案1：用数组/对象统一存储所有按钮状态 #

只需要定义一个状态，用数组（按钮数量固定用数组更方便）或者对象（按钮有唯一业务ID用对象更方便）存储所有按钮的点击状态，点击时传入当前按钮的标识，仅修改对应位置的状态值即可。
代码示例：

import { useState } from 'react'

// 初始化长度为10的数组，每个元素对应一个按钮的点击状态，默认未点击
const [clickStates, setClickStates] = useState(Array(10).fill(false))

// 点击时传入当前按钮的索引
const toggleBtnState = (index) => {
  setClickStates(prev => {
    // 拷贝原数组避免直接修改状态
    const newStates = [...prev]
    // 仅修改当前点击按钮的状态
    newStates[index] = !newStates[index]
    return newStates
  })
}

// 渲染按钮
function App() {
  return (
    <div>
      {clickStates.map((isClicked, index) => (
        <button
          key={index}
          onClick={() => toggleBtnState(index)}
          style={{ background: isClicked ? 'green' : 'gray' }}
        >
          按钮{index + 1}
        </button>
      ))}
    </div>
  )
}

如果按钮有独立的业务ID，可改用对象存储状态：

const [clickStates, setClickStates] = useState({
  submit: false,
  cancel: false,
  edit: false
  // 其余按钮ID依次添加即可
})

const toggleBtnState = (btnId) => {
  setClickStates(prev => ({
    ...prev,
    [btnId]: !prev[btnId]
  }))
}

// 调用时传入对应按钮ID
<button onClick={() => toggleBtnState('submit')}>提交</button>

方案2：封装独立的按钮子组件 #

如果按钮的点击状态不需要父组件统一管控，仅按钮自身使用，直接封装带独立状态的按钮组件是最简洁的方案，后续新增按钮也不需要修改状态定义。
代码示例：

import { useState } from 'react'

// 封装独立按钮组件，内部自己维护点击状态
const ToggleBtn = ({ children }) => {
  const [isClicked, setIsClicked] = useState(false)
  return (
    <button
      onClick={() => setIsClicked(!isClicked)}
      style={{ background: isClicked ? 'green' : 'gray' }}
    >
      {children}
    </button>
  )
}

// 父组件直接调用即可，无需管理每个按钮的状态
function App() {
  return (
    <div>
      <ToggleBtn>按钮1</ToggleBtn>
      <ToggleBtn>按钮2</ToggleBtn>
      <ToggleBtn>按钮3</ToggleBtn>
      {/* 剩余7个按钮直接复用组件即可 */}
    </div>
  )
}

选型建议 #

• 父组件需要统一获取所有按钮的点击状态时，选方案1
• 按钮状态仅内部使用，不需要父组件感知时，选方案2

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