ReactJS点击按钮打开div、map遍历下所有行按钮点击事件被触发问题

核心问题 #

• 所有行共用同一个布尔状态控制显隐：遍历渲染行时，所有行的菜单显隐都绑定同一个list状态，状态变更会触发所有行同步切换，因此会出现点击一个按钮所有行菜单都触发的问题
• 点击事件逻辑错误：handleClick中无论if(e.target.value)判断是否生效，末尾都会执行一次setList(!list)；如果判断条件命中，状态会被连续翻转两次回到原值，会出现点击无响应的问题

修复实现 #

1. 调整状态类型：将布尔类型的list替换为存储当前展开行的唯一标识（如每行数据的id），初始值设为null

const [activeRowId, setActiveRowId] = useState(null)

2. 遍历渲染时传入行唯一标识：假设遍历的数据源为dataList，每行数据有唯一id字段

{dataList.map(item => (
  <TableCell key={item.id}>
    <Button 
      className='active-select-option'
      onClick={(e) => handleClick(e, item.id)}
    >
      Actions
    </Button>
    {activeRowId === item.id ?                                                
    <div className="select-option">
      <ul className="select-option-inner rounded">
        <li>Buy More</li>
        <li>Sell </li> 
        <li>Next Li Tag</li> 
        <li>Edit Detials</li>
      </ul> 
    </div> : null }
  </TableCell>
))}

3. 修正点击事件逻辑：

const handleClick = (e, rowId) => {
  e.preventDefault()
  setActiveRowId(prev => prev === rowId ? null : rowId)
}

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