提交按钮将清除材料UI表中的所有选中框

请参阅以下代码：https://jsfiddle.net/aewhatley/Lkuaeqdr/1/。我正在尝试使用Material-UI元素来创建一个带有提交按钮的表格。提交按钮将清除材料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') 
);

来源

2017-03-15 Alex

它看起来并不像你在任何地方坚持选定的属性 - 你看过这里的“复杂的例子”吗？ http://www.material-ui.com/#/components/table - 因为你只是有一个属性，只用于每个人的渲染，从来没有发送/从任何地方读取。 –

我刚加了选中。虽然同样的问题。 – Alex

是的，实际上，看看他们的例子，如果你改变了一些切换它清除我们的选择（包括他们在那里以编程方式）。似乎它可能是实施中的一个错误。 –

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

例：

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

来源

2017-03-15 15:27:38

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

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

来源

2017-04-20 18:45:57 CaseyC

提交按钮将清除材料UI表中的所有选中框

回答

相关问题