Material-UI + React：为什么 <Table/> 的 onRowSelection 对 Select All 不起作用？答案

【问题标题】：Material-UI + React: Why doesn't <Table/>'s onRowSelection work for Select All?Material-UI + React：为什么 <Table/> 的 onRowSelection 对 Select All 不起作用？
【发布时间】：2017-03-06 16:38:08
【问题描述】：

使用 Material-UI 的 <Table/> (http://www.material-ui.com/#/components/table) 和 ReactJS，我设置了一个带有全选复选框的表格。每次单独单击行的复选框时，行 ID 都会添加到状态数组 clickedRowIds。所以console.log()，打印出一个数组，其中包含被点击的行的 id。

例如，如果我只选中第一行和第二行的复选框，控制台日志将打印：____THESE ARE THE CLICKED ROWS____ [1, 2]（其中 1 和 2 表示整数的行 ID 号）。但是当我点击标题中的全选复选框时，它会检查表中的所有复选框，但在console.log() 中，它只显示____THESE ARE THE CLICKED ROWS____ all 和ids.forEach() 得到错误Uncaught TypeError: ids.forEach is not a function。

所有的行复选框都通过全选复选框被点击，但为什么没有将所有行 ID 编号添加到 clickedRowIds 数组中？使用ids.forEach()，我想使用“全选”按钮来控制台记录所有选定的行。

export default class TestTable extends Component {
  constructor(props) {
    super(props)

    this.state = {
      clickedRowIds: [],
    }

    this.handleRowSelection = this.handleRowSelection.bind(this);
  }

  handleRowSelection(rowIds) {
    this.setState({
      clickedRowIds: rowIds
    })
  }

  render(){
    const ids = this.state.clickedRowIds
    console.log('____THESE ARE THE CLICKED ROWS____ ', ids)

    ids.forEach(id => {console.log(id)})

    return(

      <div className='table_body' style={styles.content}>
        <Table
          multiSelectable={true}
          onRowSelection={this.handleRowSelection}
        >
          <TableHeader
            displaySelectAll={true}
            enableSelectAll={true}
          >
              ...
          </TableHeader>
        </Table>
      </div>
    )
  }
}

答案将被投票和回答。

【问题讨论】：

标签： javascript arrays reactjs react-jsx material-ui

【解决方案1】：

在此处查看文档：http://www.material-ui.com/#/components/table

在选择行时调用。 selectedRows 是所有行的数组选择。如果已选择所有行，则字符串“all”将是而是返回以指示已选择所有行。

这意味着如果选择了所有行，烦人的是，您的 rowIds 将不再设置为数组，而是一个表示“全部”的字符串。在对 rowIds 调用 forEach 之前，您需要一些逻辑来处理这种情况。您的错误是由于字符串“all”没有forEach 方法可用。

【讨论】：