ReactJS + Material UI：如何识别已单击 <Table Rows 复选框？答案

【问题标题】：ReactJS + MaterialUI: How to recognize that <TableRow/>'s checkbox been clicked on?ReactJS + Material UI：如何识别已单击 <Table Rows 复选框？
【发布时间】：2016-09-09 03:00:07
【问题描述】：

使用 ReactJS + MaterialUI 的 '' (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

【问题讨论】：

标签： javascript reactjs react-jsx material-ui

【解决方案1】：

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

【讨论】：

对不起，我试过了，但没用。您能否举个例子，以便我接受答案并投票？此外，该行将如何识别该特定行的信息（例如 1、John Smith、white）？
只是看看你是否看过我的最后一条评论。请告诉我。

【解决方案2】：

正如用户 mschayna 提到的，您可以在 Table 上使用 onRowSelection 事件道具

例子

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

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

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

【讨论】：