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

IT技术 javascript reactjs
2021-05-13 04:53:53

我正在尝试将 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
  });
};

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

2个回答

三种方式：

  1. 用他们自己的状态渲染“员工”组件的地图，以便模式适合每个员工。
  2. 在父组件上使用模态渲染您的当前地图，并从员工单击中使用该员工上下文设置模态状态。
  3. 有一个基于键的状态，每个员工索引作为一个键 (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>
)
    }

}

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

其它你可能感兴趣的问题
上一篇无法使用 React js 显示本地文件夹中的 svg 下一篇如何在材料 ui REACTjs 中覆盖 menuItem 中的选定类？