ReactJS: Open only selected modal popup of map items

问题

I am trying to add react-modal to the items of the mapped array. When I click on the onClick event on the mapped items it opens all the modals at once. What I want is top open selected modal at a time.

Here I am mapping through the employee's array and adding a button to each of them with onClick modal.

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

here is the state for toggling the model

state = {
  openEditEmployeeModal: false
};

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

Now If I click the button it will open all the modal but I want to open a selected modal only. Any help will be appreciated.

回答1:

Three ways:

Render a map of "Employee" components with they own states so the modal is proper to each employee.
Render your current map with modal on the parent component and, from an employee click, set the modal state with that employee context.
Have a key based state with each employee index as a key (state[employeeId]) so you can mutate each separately.

回答2:

I usually separate them into components

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

}

let me know if you have further problems

来源：https://stackoverflow.com/questions/50803918/reactjs-open-only-selected-modal-popup-of-map-items

标签

javascript

reactjs