请参阅以下代码: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')
);
最佳答案
只需使用 TableRow
组件上的 selected
属性即可。
您需要在提交之前使用 Table
组件的 onRowSelection
属性保存表格的选定行状态。
例如:
<Table onRowSelection={this.handleRowSelection}>
...
<TableRow selected={this.state.whatever}>
...
</TableRow>
...
</Table>
关于javascript - 提交按钮会删除 Material ui 表中的所有复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42813820/