Попытка получить данные о нажатой строке таблицы реагировать JS - PullRequest
Новая
       23

Попытка получить данные о нажатой строке таблицы реагировать JS

1 голос
/ 05 апреля 2019

Я новичок, чтобы отреагировать, и я создаю приложение, в котором я хочу получить данные о строке, по которой щелкают по таблице. Не знаю, хорош этот подход или нет, мне нужны предложения

Пока у меня естьиспользовал слушатель onClick, но когда я нажимаю на таблицу, она дает мне [объект, объект] в console.log (контракт), я также пытался использовать цикл для просмотра данных в нем, но он дает мне [объект, объект],вот мой код ниже: 

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

onClickfunction 

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

1 Ответ

1 голос
/ 05 апреля 2019

Используйте 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]);
};
...