Как получить значения <td>подряд на клике - PullRequest
Новая
       7

Как получить значения <td>подряд на клике

0 голосов
/ 25 января 2019 
import React from 'react';
import { Table } from 'reactstrap';
import './SearchDataTable.css'

const SearchDataTable = (props) => {

    const serverData = props.serverData

    const handleRowClick = (rowValue) => {
        console.log(rowValue)
    }
     return(    
        <div>
        <Table bordered>
            <thead>
            <tr>
                <th>Affected</th>
                <th>Type</th>
                <th>Quantity</th>
            </tr>
            </thead>
            <tbody>
                 {props.sortData ? (serverData.sort((a,b) => a.quantity - b.quantity).map(data =>  (
                <tr className="table-row" onClick={(e) => handleRowClick(e)} key={data.quantity}>
                    <td>{data.affectedOn}</td> 
                    <td>{data.type}</td> 
                    <td>{data.quantity}</td> 
                </tr>
            ))):(serverData.sort((a,b) => b.quantity - a.quantity).map(data =>  (
                <tr key={data.quantity}>
                    <td>{data.affectedOn}</td> 
                    <td>{data.type}</td> 
                    <td>{data.quantity}</td> 
                </tr>
            ))) }
            </tbody>
      </Table>
    </div>
    )
}

export default SearchDataTable;

Из приведенного выше кода я попытался получить соответствующее значение <td> при щелчке строки. Я добавил onClick на <tr> и попытался, но не смог. Мне нужна помощь в решении этого.

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Вместо передачи e в handleRowClick передайте данные. 

import React from 'react';
import { Table } from 'reactstrap';
import './SearchDataTable.css'

const SearchDataTable = (props) => {

    const serverData = props.serverData

    const handleRowClick = (rowValue) => {
        console.log(rowValue)
    }
     return(    
        <div>
        <Table bordered>
            <thead>
            <tr>
                <th>Affected</th>
                <th>Type</th>
                <th>Quantity</th>
            </tr>
            </thead>
            <tbody>
                 {props.sortData ? (serverData.sort((a,b) => a.quantity - b.quantity).map((data, index) =>  (
                <tr className="table-row" onClick={() => handleRowClick(data)} key={index}>
                    <td>{data.affectedOn}</td> 
                    <td>{data.type}</td> 
                    <td>{data.quantity}</td> 
                </tr>
            ))):(serverData.sort((a,b) => b.quantity - a.quantity).map((data, index) =>  (
                <tr key={index}>
                    <td>{data.affectedOn}</td> 
                    <td>{data.type}</td> 
                    <td>{data.quantity}</td> 
                </tr>
            ))) }
            </tbody>
      </Table>
    </div>
    )
}

export default SearchDataTable;

Также заменил ключ в строках индексом вместо количества, так как кажется, что количество не будет уникальным идентификатором. В идеале у вас должно быть что-то уникальное, например свойство id, но с индексом все может быть в порядке, если нет.

0 голосов
/ 25 января 2019 
const handleRowClick = (data) => {
    console.log(data.affectedOn, data.type, data.quantity)
}

....
<tr onClick={() => this.handleClick(data)}>
  <td>{data.affectedOn}</td> 
  <td>{data.type}</td> 
  <td>{data.quantity}</td> 
</tr>
....
...