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

【问题标题】：ReactJS: Open only selected modal popup of map itemsReactJS：仅打开地图项的选定模式弹出窗口
【发布时间】：2023-03-08 11:59:01
【问题描述】：

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

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

const employeeInfo = this.props.employees.map(employee => (
      <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.openEditEmployeeModal}
              onClose={this.toggleEditEmployeeModal}
              center
            >
              <EditEmployeeModal />
            </Modal>

          </div>
        </td>
      </tr>
    ));
return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Employee Id</th>
            <th>Job Title</th>
            <th>Date Of Joining</th>
            <th>Employee Info</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>{employeeInfo}</tbody>
      </table>
    );
  }

这里是切换模型的状态

state = {
  openEditEmployeeModal: false
};

toggleEditEmployeeModal = () => {
  this.setState({
    openEditEmployeeModal: !this.state.openEditEmployeeModal
  });
};

现在，如果我单击按钮，它将打开所有模式，但我只想打开选定的模式。任何帮助将不胜感激。

【问题讨论】：

首先，定义组件的方式非常奇怪。但是不管它们都打开了，因为它们都在查看相同的状态变量……我建议您做更常见的事情，并将每个员工都设置在自己的组件中，并使用 HOC 来定义对话框打开事件。或在父级别定义一个对话框，该对话框将使用所选员工详细信息进行切换
我用更多代码更新了帖子。
那仍然无济于事。因为它们都在同一个组件中，并且只有一个状态标志。我建议您在 EmployeeInfo 组件中定义每个员工，在那里您可以做两件事之一。在此处定义模态并设置内部状态或定义父级将知道加载模态但包含员工详细信息的 cb。
感谢您的回复。打算试试你的解决方案
@Jony-Y 感谢他现在按照您的指示工作。

标签： javascript reactjs

【解决方案1】：

三种方式：

使用他们自己的状态呈现“员工”组件的地图，以便该模式适合每个员工。
在父组件上使用模态渲染您的当前地图，并通过员工单击设置具有该员工上下文的模态状态。
拥有一个基于键的状态，每个员工索引都作为键 (state[employeeId])，因此您可以分别对每个索引进行变异。

【讨论】：

【解决方案2】：

我通常将它们分成组件

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>
)
    }

}

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

【讨论】：