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>

onClick功能

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

Answer 1

在设置JSON.stringify时使用data-item

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

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

1 个答案: