提交按钮清除材料 ui 表中的所有复选框答案

【问题标题】：Submit button erases all checked boxes in material ui table提交按钮清除材料 ui 表中的所有复选框
【发布时间】：2017-03-15 15:17:38
【问题描述】：

请参阅以下代码：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')
);

每次单击提交按钮时，所有选中的框都未选中。这是因为 render 再次被调用，如果是这样，我该如何让它保持选中状态？谢谢。

编辑：我为表的两行设置了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')
);

【问题讨论】：

看起来你没有在任何地方持久化选定的属性——你看过这里的“复杂示例”吗？ material-ui.com/#/components/table - 你只有一个属性，它只用于每个单独的渲染，从不从任何地方发送/读取。
我刚刚添加了选中的。不过同样的问题。
是的，实际上，查看他们的示例，如果您更改某些切换，它会清除我们的选择（包括它们以编程方式在其中的内容）。似乎这可能是实现中的错误。
是的，我会在他们的 github 页面上询问。
这很可能是因为您需要将 <TableBody/> deselectOnClickaway 属性设置为 false。默认情况下是真的。 Material-UI 文档声明它控制是否在单击表格外部后取消选择所有选定的行。设置成<TableBody deselectOnClickaway={false}>就不会再有这个问题了。

标签： javascript reactjs material-ui

【解决方案1】：

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

例如：

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

【讨论】：

嗯，它不适合我。我为两行设置了 selected=true，并创建了一个打印出所选行的 onRowSelection 函数。请参阅更新的 JS 小提琴。

【解决方案2】：

这很可能是因为您需要将 <TableBody/> deselectOnClickaway 属性设置为 false。默认情况下是真的。 Material-UI 文档声明它控制是否在单击表格外部后取消选择所有选定的行。将其设置为<TableBody deselectOnClickaway={false}>，您将不再遇到此问题。

【讨论】：