如何在 onClick 上连续获取 <td> 值答案

【问题标题】：How do I get the <td> values in a row onClick如何在 onClick 上连续获取 <td> 值
【发布时间】：2019-01-25 15:38:18
【问题描述】：

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> 值。我在<tr> 上添加了 onClick 并尝试过，但没有成功。我需要一些帮助来解决这个问题。

【问题讨论】：

标签： reactjs html-table

【解决方案1】：

不是将 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 属性，但如果没有，索引也可以。

【讨论】：

另外，可能希望将相同的 onClick 应用于三元中的第二种情况，因为我假设排序顺序不会影响该行是否可点击。

【解决方案2】：

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

【讨论】：