Question

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

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

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

如何在onClick中连续获取值

2 个答案: