javascript - 提交按钮会删除 Material ui 表中的所有复选框

Question

请参阅以下代码:https://jsfiddle.net/aewhatley/Lkuaeqdr/1/ 。我正在尝试使用 Material-UI 元素构建一个带有提交按钮的表格。

const {
  Table,
  TableHeader,
  TableHeaderColumn,
  TableBody,
  TableRow,
  TableRowColumn,
  MuiThemeProvider,
  getMuiTheme,
  RaisedButton
} = MaterialUI;

 class Example extends React.Component {
  render() {
    const customColumnStyle = { width: 12, backgroundColor: 'yellow' };

    return (
      <div>
        <Table multiSelectable={true}>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>A</TableHeaderColumn>
              <TableHeaderColumn style={customColumnStyle}>B</TableHeaderColumn>
              <TableHeaderColumn>C</TableHeaderColumn>
            </TableRow>            
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableRowColumn>1</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>2</TableRowColumn>
              <TableRowColumn>3</TableRowColumn>
            </TableRow>
            <TableRow>
              <TableRowColumn>4</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>5</TableRowColumn>
              <TableRowColumn>6</TableRowColumn>
            </TableRow>
            <TableRow>
              <TableRowColumn>7</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>8</TableRowColumn>
              <TableRowColumn>9</TableRowColumn>
            </TableRow>
          </TableBody>
        </Table>
        <RaisedButton label={"Submit"}/>
      </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

每次单击提交按钮时，所有选中的复选框都会被取消选中。这是因为渲染被再次调用，如果是这样，我该如何使这些框保持选中状态？谢谢。

编辑:我为表格的两行设置了 selected={true} ，但我遇到了完全相同的问题:

const {
  Table,
  TableHeader,
  TableHeaderColumn,
  TableBody,
  TableRow,
  TableRowColumn,
  MuiThemeProvider,
  getMuiTheme,
  RaisedButton
} = MaterialUI;

 class Example extends React.Component {
   onRowClick = (key) => {
    console.log(key);
   }

  render() {
    const customColumnStyle = { width: 12, backgroundColor: 'yellow' };

    return (
      <div>
        <Table multiSelectable={true} onRowSelection={this.onRowClick}>
          <TableHeader>
            <TableRow >
              <TableHeaderColumn>A</TableHeaderColumn>
              <TableHeaderColumn style={customColumnStyle}>B</TableHeaderColumn>
              <TableHeaderColumn>C</TableHeaderColumn>
            </TableRow>            
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableRowColumn>1</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>2</TableRowColumn>
              <TableRowColumn>3</TableRowColumn>
            </TableRow>
            <TableRow selected={true}>
              <TableRowColumn>4</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>5</TableRowColumn>
              <TableRowColumn>6</TableRowColumn>
            </TableRow>
            <TableRow selected={true}>
              <TableRowColumn>7</TableRowColumn>
              <TableRowColumn style={customColumnStyle}>8</TableRowColumn>
              <TableRowColumn>9</TableRowColumn>
            </TableRow>
          </TableBody>
        </Table>
        <RaisedButton label={"Submit"}/>
      </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

Answer 1

只需使用 TableRow 组件上的 selected 属性即可。您需要在提交之前使用 Table 组件的 onRowSelection 属性保存表格的选定行状态。

例如:

<Table onRowSelection={this.handleRowSelection}>
...
  <TableRow selected={this.state.whatever}>
  ...
  </TableRow>
...
</Table>