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

Question

我正在尝试将react-modal添加到映射数组的项中。当我单击映射项上的onClick事件时，它会同时打开所有的情态动词。我想要的是顶部开放选择的模式一次。

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

null

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

null

下面是切换模型的状态

null

state = {
  openEditEmployeeModal: false
};

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

null

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

Answer 1

我通常把它们分成组件

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

}

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

Answer 2

三种方式：

1. 呈现“Employee”组件的映射，该组件具有自己的状态，以便模式适合每个员工。
2. 在父组件上使用模式呈现当前映射，然后单击employee后，使用该employee上下文设置模式状态。
3. 有一个基于键的状态，每个员工索引都是键(state[employeeId])，这样您就可以分别更改每个索引。