React项目问题：点击按钮仅触发对应下拉列表独立展开

问题出在你用了一个全局的action状态控制所有下拉列表的显示/隐藏，所有用户条目里的{action && <Action />}都绑定同一个状态，所以只要状态切换，所有下拉都会同步触发。要实现点击对应按钮只展开当前条目，需要给每个条目单独管理展开状态。

修改方案： #

1. 替换全局状态为条目唯一标识
   把原来的布尔状态改成记录当前展开条目的唯一ID（这里用每个用户的time字段，它是生成的唯一值）：

   // 替换原来的const [action, setAction] = useState(false)
   const [expandedId, setExpandedId] = useState(null)
   

2. 简化点击事件处理逻辑
   不用遍历所有用户，直接判断当前点击的条目ID是否为展开状态：

   const showPpt = (e, time) => {
     // 当前条目已展开则关闭，否则展开当前条目
     setExpandedId(prevId => prevId === time ? null : time)
   }
   

3. 修改下拉列表的显示条件
   渲染每个用户条目时，仅当当前条目的time与expandedId匹配时才显示下拉：

   <div className="action">
     <button className='but' onClick={(e)=>showPpt(e, time)}>action</button>
     {expandedId === time && <Action />}
   </div>
   

额外优化建议： #

• 单选按钮存在value错误，比如学生选项的value写成了employed，修正为：

  <input type="radio" name="employment" id="student" onChange={handleChange}  value="student" />
  

• user状态字段可简化，无需单独存single/married，直接用relationship和employment对应单选框的name：

  const [user, setUser] = useState({
    firstName: '', 
    lastName: '', 
    email: '', 
    phone: '',
    relationship: '', 
    employment: ''
  })
  

修改后，每个按钮只会控制对应条目的下拉列表，不会影响其他条目。

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