React开发：如何避免单次点击触发所有图标状态切换的问题

问题原因 #

• 所有图标共用了同一个click布尔状态，状态变化会同步作用到全部图标上
• 点击事件绑定在父级div容器上，点击任意位置都会触发全局状态修改

解决方法 #

方案1：封装独立图标组件（推荐） #

把可切换的图标抽成单独组件，每个组件自己维护独立的点击状态，互不干扰，复用性更强：

import React, { useState} from 'react'
import { FaPlus, FaMinus} from 'react-icons/fa'

// 抽离独立的切换图标组件
function ToggleIcon() {
  const [isPlus, setIsPlus] = useState(false)
  return (
    <span onClick={() => setIsPlus(!isPlus)}>
      {isPlus ? <FaPlus /> : <FaMinus />}
    </span>
  )
}

function App2() {
  return (
    <>
      <div>
        <ToggleIcon />
        <ToggleIcon />
        <ToggleIcon />
        <ToggleIcon />
      </div>
    </>
  )
}

export default App2

方案2：用数组状态存储每个图标的状态 #

如果不想抽离组件，也可以用数组记录每个图标的状态，点击时根据下标只修改对应位置的状态：

import React, { useState} from 'react'
import { FaPlus, FaMinus} from 'react-icons/fa'

function App2() {
  // 初始化4个图标对应的状态，默认都是false
  const [iconStates, setIconStates] = useState(new Array(4).fill(false))

  function handleClick(index) {
    const newStates = [...iconStates]
    // 仅修改点击位置对应下标的状态
    newStates[index] = !newStates[index]
    setIconStates(newStates)
  }

  return (
    <>
      <div>
        {iconStates.map((isPlus, index) => (
          <span key={index} onClick={() => handleClick(index)}>
            {isPlus ? <FaPlus /> : <FaMinus />}
          </span>
        ))}
      </div>
    </>
  )
}

export default App2

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