Question

我很难将索引从按钮传递到按钮，所以这是我的代码。第一个是渲染循环，它显示我的所有行及其按钮，删除部分的按钮正在从行调用索引。

    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> 

    // this part is calling button is calling the {i} or what we call the index
    <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>
}

这是我进入模态的地方

 {/*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"> 
     // I tried calling the index here but the modal can't see my index
                <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>

但我的模态上的onclick无法看到索引，因为它总是删除第一行

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

PS：删除工作我的问题只是ajax

Answer 1

您将emplyee ID作为参数传递给bind函数，这根本没有意义，您需要做的是将员工ID传递给deleteEmployee函数，如下所示：

onClick={() => this.deleteEmployee(d.Employee_ID , d.Employee_Name,i).bind(this)}

另外，只是作为额外信息开始使用ES6的功能强大的箭头功能，您不必每次都绑定this，例如在您的情况下只需将上面的点击处理程序更改为：

onClick={() => this.deleteEmployee(d.Employee_ID , d.Employee_Name,i)}

并且您的deleteEmployee函数应如下所示：

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

Answer 2

按钮你应该改变它

 <td><center><button className ='btn btn-danger'  onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td>

并在构造函数中添加bind

constructor() {
    super();
    this.state = { jsonReturnedValue: []}

     this.handleOnclick2= this.handleOnclick2.bind(this)

}

模态如何看到行的索引Reactjs

2 个答案: