Question

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

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

＆＃13;

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

＆＃13;

这是切换模型的状态

＆＃13;

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

＆＃13;

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

Answer 1

三种方式：

-Render地图＆＃34;员工＆＃34;具有自己状态的组件，因此模态适用于每个员工。

- 使用父组件上的模态恢复当前地图，并从员工点击中设置具有该员工上下文的模态状态。

- 具有基于密钥的状态，每个员工索引作为密钥（state [employeeId]），因此您可以单独改变每个。

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

}

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

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

2 个答案: