Question

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

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/

Answer 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>
 );
};

如何在react js

1 个答案: