如何在反应js中获取表格行中的点击事件

Posted 2023-02-22

【中文标题】如何在反应js中获取表格行中的点击事件

【英文标题】：How to get click event in table row in react js

【发布时间】：2019-07-27 15:27:14

【问题描述】：

我需要在表格行中获取点击事件。我的代码如下。

const TableBody = (props) => 
const invoices = props.invoices;
const rows = [];
invoices.forEach((invoice) => 
    rows.push(<TableRow invoice=invoice key=invoice.invoiceNo/>);
);
return (
    <tbody>
    rows
    </tbody>
  );
; 

上面我添加了表格主体的代码

const TableRow = (props) => 
const invoice = props.invoice;
return (
    <tr>
        <DateTableData date=invoice.dueDate/>
        <TableData value=invoice.issuer/>
        <TableData value=invoice.invoiceNo/>
        <DateTableData date=invoice.invoiceDate/>
        <TableData value=formatStringWithDefaultValue(invoice.identifier, "- - -")/>
        <td className="total-amount">formatCurrency(invoice.totalAmount, 'SEK')</td>
    </tr>
 );
;

我想获取点击的行，以便了解点击项目的更多详细信息。我没有使用反应表。如何将点击事件添加到表格行？

class InvoiceList extends React.Component 
constructor(props) 
    super(props);


render() 
    return (
        <div className="container">
            <div className="row">
                <div className="col-lg-9">
                    <table className=" table table-hover table-responsive-md" style=marginTop: '1.5rem'>
                        <TableHead/>
                        <TableBody invoices=this.props.invoices/>
                    </table>
                </div>
                <div className="col-lg-3">
                    <InvoiceSummary/>
                </div>
            </div>
        </div>
    );

我尝试了本教程，但没有帮助。 https://material-ui.com/demos/tables/

【问题讨论】：

我认为将表格中的一个元素设置为诸如发票号之类的链接可能会更容易。这是使表格元素可点击的规范。

【参考方案1】：

试试这个

const TableRow = (props) => 
const invoice = props.invoice;
return (
    <tr onClick=props.yourMethod>
        <DateTableData date=invoice.dueDate/>
        <TableData value=invoice.issuer/>
        <TableData value=invoice.invoiceNo/>
        <DateTableData date=invoice.invoiceDate/>
        <TableData value=formatStringWithDefaultValue(invoice.identifier, "- - -")/>
        <td className="total-amount">formatCurrency(invoice.totalAmount, 'SEK')</td>
    </tr>
 );
;