Question

我是这种语言的初学者，我之前使用过php。所以表有一个按钮，当我点击按钮时它只读取第一行它不会读取其他行，在php中我使用了函数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方法，您可以在父console.log函数中使用onClick进行检查，如下所示：

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

我的模态怎么能知道行中的索引点击了reactjs

1 个答案: