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

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

前：

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

Answer 2

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

“提交”按钮将删除材料ui表中的所有复选框

2 个答案: