reactjs - 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

您可以创建一个编辑方法来接收行的数据，并在按钮编辑上调用它:

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:注意， map 的功能需要是箭头功能，将组件绑定(bind)到它上面，然后才能访问edit方法。