如何从 ReactJS 中的 Material-UI 的 <Table> 中取消选择所有行？

Question

我正在使用 Material-UI 的 <Table/> 和 ReactJS。目前我有<Table/> 选择所有复选框工作，它跟踪通过onRowSelection={this.handleRowSelection} 单击了哪一行。但是一旦我取消选中全选复选框，它就会取消选中除最后一行之外的所有行的复选框。

我怎样才能得到它以便取消选中全选复选框实际上会取消选择所有行的复选框？

代码如下：

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

    this.state = {
      clickedRowIds: [],
    }

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

  handleRowSelection(rowIds) {
    let rowsAll = []

    if (rowIds === 'all') { //get all the id's from data
      this.state.rows.map((row, index) => {rowsAll.push(index)})
    } else {
      this.setState({
        clickedRowIds: rowIds
      })
    }
  }

  render(){

    return(

      <div>
        <Table
          multiSelectable={true}
          onRowSelection={this.handleRowSelection}
        >
          <TableHeader
            displaySelectAll={true}
            enableSelectAll={true}
          >
              ...
              //rows is just an array of objects, and each row is represented by one object in that array
              {
              this.state.rows.map((row, index) => { return(<TableRow selected={this.state.clickRowIds.indexOf(rowIndex) !== -1}/> })
              }
          </TableHeader>
        </Table>
      </div>
    )
  }
}

Answer 1

这里有一个错字——应该是“!==”而不是“!--”

this.state.clickRowIds.indexOf(rowIndex) !-- -1

Answer 2

由于没有本地方法可以做到这一点，我有一个解决方法：

1. 参考表体
2. 清除 state.selectedRows 的 TableBody

例子：

参考

<TableBody deselectOnClickaway={false} ref={tableBody => this.tableBody = tableBody}>

清除选择

this.tableBody.setState({ selectedRows: [] });

Answer 3

这就是我解决完全相同问题的方法。 你的渲染方法应该返回这个：

<div>
    <Table
      selectable={true}
      multiSelectable={true}
      onRowSelection={this.handleRowSelection}
    >
      <TableHeader
        displaySelectAll={true}
        enableSelectAll={true}
      >
      </TableHeader>

      <TableBody 
        displayRowCheckbox={true} 
        displaySelectAll={true} 
        deselectOnClickaway={false}
      >
          ...
      </TableBody>


    </Table>
  </div>