javascript - 如果在 onRowSelection 中使用 setState 则 react : Material-ui tableRow can not choose,

Question

我有一个material-ui table 我想将选定的行传递给 DELETE 按钮。

  constructor(props) {
      super(props);
      this.state = {
            selectedRows: 'none',
      };
      }

  onRowSelection(val){
    console.log(this);
    this.setState({
      selectedRows: val,
    });
  }

render() {
<Table
              fixedHeader={true}
              selectable={true}
              multiSelectable={true}
              onRowSelection={this.onRowSelection.bind(this)}
            >
    ...
               <TableFooter adjustForCheckbox={true}>
                 <TableRow>
                   <TableRowColumn colSpan="5" style={{textAlign: 'right'}}>
                  <RaisedButton
                    primary={true}
                    label="DELETE"
                    labelPosition="after"
                    icon={<ActionDelete/>}
                    onClick={this.props.onDelete.bind(this.state.selectedRows)}
                  />
                   </TableRowColumn>
                 </TableRow>
               </TableFooter>
</Table>
}

我想将 this.state.selectedRows 传递给 this.props.onDelete 函数，但是作为在此提及 issue ，material-ui在onRowSelection中setState有问题。

我该如何修复它，是否有另一种方法来访问选定的行并将它们传递给某个函数以及为什么存在此类错误(如果我在父组件上使用 setState，为什么 onRowSelection 会介意？)

Answer 1

material-ui 的表格在每次渲染时重置其选中状态时存在问题。要克服这个问题，您需要使用 setTimeout 恢复检查状态并自行管理检查数组。至少在修复此错误之前。在该州，有这个:

  state = {
    selectedRows: [],
  };

渲染时，添加:

            <TableRow key={index}
              selected={this.state.selectedRows.indexOf(index) !== -1}>
            </TableRow>

既然你自己维护了选中状态，你应该有一个函数来接受选中/取消选中调用，并恢复取消选中所有请求，比如

  onRowSelection(selectedRows) {
    if (selectedRows.length === 0) { // due to a bug in material-ui
      setTimeout(() => { this.setState({ selectedRows: this.state.selectedRows }) }, 100);
      return;
    };
    this.setState({ selectedRows });
  }

和

      <Table
        onRowSelection={this.onRowSelection}

和

  constructor(props) {
    super(props);
    this.onRowSelection = this.onRowSelection.bind(this);
  }

并且您还应该添加一个按钮以允许用户取消选中所有内容。