Question

使用ReactJS + MaterialUI＆＃39;＆＃39;＆＃39; （http://www.material-ui.com/#/components/table），我创建了一个包含两行的表，每行都有一个复选框。单击复选框后，如何获取方法以识别行的事件以及该特定行的信息？

以下是代码：

import React, { Component } from 'react';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';

class TableExample extends Component {
  <Table>
    <TableHeader>
      <TableRow>
        <TableHeaderColumn>Row Count</TableHeaderColumn>
        <TableHeaderColumn>Name</TableHeaderColumn>
        <TableHeaderColumn>Color</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableRowColumn>1</TableRowColumn>
        <TableRowColumn>John Smith</TableRowColumn>
        <TableRowColumn>White</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>2</TableRowColumn>
        <TableRowColumn>Randal White</TableRowColumn>
        <TableRowColumn>Green</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>3</TableRowColumn>
        <TableRowColumn>Stephanie Sanders</TableRowColumn>
        <TableRowColumn>Black</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>
);

export default TableExample

Answer 1

onRowSelection组件上有一个事件道具Table。请检查您已链接的文档。

Answer 2

正如用户 mschayna 所述，您可以在onRowSelection上使用Table事件道具

实施例

<Table
  onRowSelection={ this.handleRowSelection }
>
...
</Table>

在 handleRowSelection 函数中，您将收到一个包含用户选择的所有行的数组

handleRowSelection( selectedRows ) {
  // selectedRows contains all the rows that have been selected by the user.
  // If all rows have been selected then selectedRows will be a string and its value will be 'all'

  if ( selectedRows === "all" ) {
    // all the rows in the table has been selected by the user
    // add your logic here.

  } else {
    // selectedRows is an array
    // iterate over it.
    selectedRows.map( (row) => {
      // here you can access specific rows details.
      console.log('row', row);
      // your logic here.
    });

  }

}

但是，您也可以这样做

<Table>
  <TableHeader>
    ...
  </TableHeader>
  <TableBody>
    <TableRow onClick={ () => { handleRowClick(1, 'John Smith', 'White') } }>
      <TableRowColumn>1</TableRowColumn>
      <TableRowColumn>John Smith</TableRowColumn>
      <TableRowColumn>White</TableRowColumn>
    </TableRow>
    ...

在 handleRowClick 功能中，您可以添加逻辑

handleRowClick( id, name, color ) {
  // this will be called when a user clicks on the row.
  console.log(`Users id is ${id} and name is ${name} and color is ${color}`);
}

单击复选框后，如何获取方法来识别行的事件以及该特定行的信息？

您可以在复选框输入中添加此代码，但请记住，如果已选中，则必须检查它。

onChange={ (event) => { handleRowClick(1, 'John Smith', 'White', event) } }

请注意新的事件参数传递给该函数。您现在可以访问事件数据并查看是否选中了复选框。

使用此代码，在必要时进行更改并使用您最熟悉的方法。

ReactJS + MaterialUI：如何识别单击<tablerow>的复选框？

2 个答案: