试图获取表格点击的行的数据反应js

Question

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

到目前为止，我已经使用了 onClick 侦听器，但是当我单击表格时，它在 console.log(contract) 中给了我 [object,object]，我也尝试使用循环来查看其中的数据，但它给出了我 [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>

点击功能

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