Javascript ReactJS：仅打开地图项目的选定模式弹出窗口

我试图将react模式添加到映射数组的项中。什么时候 我单击映射项上的onClick事件，它会立即打开所有模态。我想要的是一次打开顶部的选定模式

在这里，我映射了员工的数组，并使用onClick模式为每个数组添加了一个按钮

const employeeInfo=this.props.employees.map（employee=>(
{employee.name}
//这是模态组件
));
返回(
名称
员工Id
职位名称
加入日期
员工信息
行动
{employeeInfo}
);
}

三种方式：

呈现“Employee”组件及其自身状态的映射，以便模式适合每个员工

在父组件上使用模态渲染当前贴图，并通过员工单击，使用该员工上下文设置模态状态

有一个基于键的状态，每个员工索引都作为键（state[employeeId]），这样就可以分别对每个索引进行变异

---

我通常把它们分成几个部分

const employeeInfo = this.props.employees.map(employee => (
    <Employee employee=employee />
    ));

class Employee extends PureComponent {
   render(){
      constructor(props){
      super(props);
      this.state={visible:false}
     }
 toggleEditEmployeeModal(){
   this.setState({
   visible = !this.state.visible
      })
   }
  var employee = this.props.employee

    return(
      <tr key={employee.employeeId} className="employee_heading">
        <td>{employee.name}</td>

        <td className="actions">
          <div className="group">
            <button className="edit" onClick={this.toggleEditEmployeeModal}>
              <i className="fas fa-pencil-alt" />
            </button>

            //This is the modal component
            <Modal
              open={this.state.visible}
              onClose={this.toggleEditEmployeeModal}
              center
            >
              <EditEmployeeModal />
            </Modal>

          </div>
        </td>
      </tr>
)
    }

}

const employeeInfo=this.props.employees.map（employee=>(
));
类Employee扩展了PureComponent{
render（）{
建造师（道具）{
超级（道具）；
this.state={visible:false}
}
toggleEditEmployeeModal（）{
这是我的国家({
可见=！this.state.visible
})
}
var employee=this.props.employee
返回(
{employee.name}
//这是模态组件
)
}
}

---

如果您还有其他问题，请告诉我

首先，定义组件的方法非常奇怪。但不管怎样，它们都是开放的，因为它们都在看同一个状态变量。。。我建议您执行更常见的操作，将每个员工都设置在自己的组件中，并使用HOC来定义对话框打开事件。或者在父级定义一个对话框，该对话框将与所选员工详细信息切换。我用更多代码更新了帖子。这仍然没有帮助。因为它们都在同一个组件中，并且只有一个国旗。我建议您在EmployeeInfo组件中定义每个员工，在那里您可以执行以下两种操作之一。在此处定义模式，并设置内部状态或定义一个cb，家长将知道如何加载模式，但要包含员工详细信息。感谢您的回复。我要试试你的solution@Jony-谢谢你，伙计，现在按照你的指示工作了。