我的模态如何知道行中的索引单击的 reactjs

Question

我是这种语言的初学者，我以前用过php。所以表格有一个按钮，当我单击按钮时，它只读取第一行，它不会读取其他行，在 php ive 中使用了函数 attr，所以它会读取另一个点击的行，在 reactjs 我不知道如何帮助

return <tr key={i} >
        <td>{d.Employee_Name}</td>
        <td>{d.Address}</td> 
        <td><center><button className ="btn btn-info" onClick={ this.props.onClick }   data-toggle="modal" data-target="#UpdateEmployee">Update</button></center></td>
  <td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" 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">Update Employee</h4>
              </div>
          <div className="container">
            <div className="modal-body">
                <table> 
                <tbody>
                <tr>
                <td>Name</td>
                <td> <input type="text"value={ d.Employee_Name} /> </td>
                </tr>
                <tr>
                <td>Address</td>
                <td><input type="text" value={ d.Address} />  </td>
                </tr>
                </tbody>
                </table>
            </div>
            </div>
            <div className="modal-footer">
              <botton className="btn btn-info"> Update Employee</botton>
              <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
        </tr>
}

Answer 1

要获取单击的项目索引，您需要bind索引以onClick每个元素的函数，如下所示：

<td>
    <center>
         <button ... onClick={() => this.props.onClick(i) }></button>
    </center> 
</td>

注意：将...替换为您正在使用的其他属性。

每当您单击任何项目时，索引 i 都会传递给this.props.onClick方法，您可以通过在父onClick函数中使用 console.log 来检查，如下所示：

onClick(index){
   console.log(index); // it will print the index of item clicked
}