javascript - 尝试获取表 react js单击的行的数据

Question

我是 react 新手，正在制作应用程序，我想要获取表格上被单击的行的数据，我不知道这种方法是否好，需要建议

到目前为止，我已经使用了 onClick 监听器，但是当我单击表格时，它在 console.log(contract) 中给出了 [object,object]，我也尝试使用循环来查看其中的数据，但它给出了我[对象，对象]，这是我的以下代码:

    <table id="mytable" cellSpacing="0" width="100%">
         <thead>
         <tr>
             <th>CarName</th>
             <th>DriverName</th>
             <th>Date</th>
             <th>Pickup</th>
         </tr>
         </thead>
          <tbody>

          {                                   
            this.state.contracts.map((contract,index)=>{
            return(
              <tr key={index}  data-item={contract} onClick={this.contractdetails}>
                            <td>{contract.car} </td>                                                       
                            <td>{contract.driver}</td>
                            <td>{contract.date}</td>
                            <td>{contract.pickup}</td>
              </tr>
                      )})

            }
          </tbody>
         </table>

onClick函数

 contractdetails=(e)=>{
    const contract=e.currentTarget.getAttribute('data-item');
    console.log(contract)
};

Answer 1

设置data-item时使用JSON.stringify

<tr key={index}  data-item={JSON.stringify(contract)} onClick={this.contractdetails}>

并在访问它时使用JSON.parse()。

contractdetails=(e)=>{
    const contract= JSON.parse(e.currentTarget.getAttribute('data-item'));
    console.log(contract)
};

更好的方法是将 index 设置为 data-index，您可以从 state 访问它

this.state.contracts.map((contract,index)=>{
            return(
              <tr key={index}  data-index={index} onClick={this.contractdetails}>
               ...
               ...

            }

您可以像下面这样访问它

contractdetails=(e)=>{
    let index = +e.currentTarget.getAttribute('data-index')
    console.log(this.state.contracts[index]);
};