我正在使用材质 ui 表。其中一列有 SelectField 组件,这是一个下拉列表,可供选择的项目很少。示例代码在这里:
<TableBody
displayRowCheckbox={this.state.showCheckboxes}
deselectOnClickaway={this.state.deselectOnClickaway}
showRowHover={this.state.showRowHover}
stripedRows={this.state.stripedRows}
>
{tableData.map( (row, index) => (
<TableRow key={index} selected={row.selected}>
<TableRowColumn>{index}</TableRowColumn>
<TableRowColumn>
<SelectField key={index} value={row.clientId} onChange={this.handleRowChange}>
{clientsDropdownData.map((row, index) =>(
<MenuItem key={row.val} value={row.val} primaryText={row.name} />
))}
</SelectField>
</TableRowColumn>
<TableRowColumn>{row.name}</TableRowColumn>
<TableRowColumn>{row.status}</TableRowColumn>
</TableRow>
))}
</TableBody>
根据提供给表的数据的 clientId 值正确设置所有行的下拉列表的初始值。在更改选定行的下拉列表时,我想更改提供的数据的 clientId 属性。我怎样才能实现它?React 是关于状态的。但是我如何管理多个动态状态?
这就是我对 SelectField 的 onChange 所拥有的:
handleRowChange = (event, index, rowValue) => {
//this.setState({rowValue}); how to set state here?
tableData[index]['clientId'] = rowValue; //this doesn't work. But this is what I want. I want to update tableData and also update the UI.
}