React JS-从渲染表中的行获取数据以编辑数据

Question

我正在开发一种admon可以编辑ParseServer中存储的数据的方法。

我实现了一种搜索记录，过滤数据并再次重新呈现的方法。现在，我需要编辑获取的数据并通过UPDATE VERB更新记录。

如何获取行数据？例如console.log中的“Código”。

这是我的源代码：

render() {
    return (
     <table className="table table-hover table-bordered">
                                <thead>
                                <tr>
                                    <th scope="col"><center>Edit</center></th>
                                    <th scope="col"><center>#</center></th>
                                    <th scope="col"><center>Código</center></th>
                                    <th scope="col">Nombres</th>
                                    <th scope="col">Apellidos</th>
                                    <th scope="col">Grado</th>
                                </tr>
                                </thead>
                                <tbody id="cursorPointer">
                                   {/*Rendering data*/}
                                    {this.state.data.map(function(item, key) {
                                        return (
                                            <tr key = {key} >
                                                <td><center><button ... > Edit </button></center></td>
                                                <td><center>{item.objectId}</center></td>
                                                <td><center>{item.Codigo}</center></td>
                                                <td>{item.Nombres}</td>
                                                <td>{item.Apellidos}</td>
                                                <td>{item.Grado}</td>
                                            </tr>
                                        )
                                    })}
                                </tbody>
                            </table> 
  )
}

任何的想法？

Answer 1

您可以创建一个方法编辑，该方法编辑将接收data该行的，并在按钮上调用它Edit：

edit = (data) => { 
    // Do whatever you want
}
render() {
    return (
     <table className="table table-hover table-bordered">
           <thead>
              <tr>
                 <th scope="col"><center>Edit</center></th>
                 <th scope="col"><center>#</center></th>
                 <th scope="col"><center>Código</center></th>
                 <th scope="col">Nombres</th>
                 <th scope="col">Apellidos</th>
                 <th scope="col">Grado</th>
              </tr>
           </thead>
           <tbody id="cursorPointer">
              {/*Rendering data*/}
              {this.state.data.map( (item, key) => {
                 return (
                      <tr key = {key} >
                      <td>
                        <center>
                           <button onClick={() => this.edit(item)}>Edit<button>
                        </center>
                      </td>
                      <td><center>{item.objectId}</center></td>
                      <td><center>{item.Codigo}</center></td>
                      <td>{item.Nombres}</td>
                      <td>{item.Apellidos}</td>
                      <td>{item.Grado}</td>
                   </tr>
                 )
              })}
        </tbody>
     </table> 
  )
}

PS：请注意，地图的功能需要是箭头功能，将组件绑定到它，然后它才能访问该edit方法。