代码之家 › 专栏 › 技术社区 › marcode_ely

react js-从呈现表中的行获取数据以编辑数据

react-native reactjs

marcode_ely · 技术社区 · 6 年前

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

我实现了一种搜索记录、过滤数据并重新呈现的方法。现在,我需要编辑获取的数据并通过update动词更新记录。

如何获取行数据?。例如console.log“cdigo”。

这是我的源代码:

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

知道吗?

1 回复 | 直到 6 年前

reisdev 6 年前

您可以创建一个方法编辑,它将接收 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> 
  )
}

附言: 注意,映射的函数需要是一个箭头函数,以便将组件绑定到它,然后它可以访问 edit 方法。