mercredi 24 mai 2017

How to find the index in button to modal Reactjs

so im having Difficulty on passing the index from button to button so here is my code the first one is the render loop that shows all my rows and its button the button at the delete part is calling the index from the row

    renderItem(d, i) {
  return <tr key={i} >
    <td> {d.Employee_ID} </td>
    <td>{d.Employee_Name}</td>
    <td>{d.Address }</td> 
    <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this,  d.Employee_ID, d.Employee_Name, d.Address , d.Department)}   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
    <td><center><button className ='btn btn-danger'  onClick={this.handleOnclick.bind(this,  d.Employee_ID , d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td>


         </tr>
}

this is where it proceed to my modal

 {/*Delete*/}
           <div className="modal fade" id="DeleteEmployee" role="dialog">
           <div className="modal-dialog">
             <div className="modal-content">
                <div className="modal-header">
                  <button type="button" className="close" data-dismiss="modal">&times;</button>
                  <h4 className="modal-title">Delete Employee</h4>
                </div>


                  <div className="container">
                  <div className="modal-body">
                        Are you sure you want to delete {this.state.Employee_Name}?
                  </div>
                  </div>
                <div className="modal-footer">
                <input type="submit" className ="btn btn-danger"  data-dismiss="modal" onClick={this.deleteEmployee.bind(this, this.state.Employee_ID ,this.state.i)}/>
                <button type="button" className="btn btn-default" data-dismiss="modal" >Close</button>
              </div>


            </div>
          </div>
        </div>

but the onclick on my modal can't see the index please help me because it always delete the first row

deleteEmployee(id, index) {
  jQuery.support.cors = true;
    fetch('http://localhost:5118/api/employeedetails/DeleteEmployeeDetail/'+ id, {
         method: 'GET'
  }).then(function(response) {
     // history.go(0);
      var jsonReturnedValue = [...this.state.jsonReturnedValue];
      this.setState({jsonReturnedValue})
  }).catch(function(err) {
    // Error :(
  });
    this.state.jsonReturnedValue.splice(index, 1)
    this.setState({})
}




Aucun commentaire:

Enregistrer un commentaire