表内的材质 UI 开关

Question

我有以下代码在材料 ui 中的表中显示开关状态。但是我被困在如何将onChange行为添加到各个行开关上。对此有什么建议吗？

<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow >
<TableCell></TableCell>
<TableCell  className={classes.head} >Accept Orders</TableCell>
<TableCell   className={classes.head} >Process Send Queue</TableCell>
</TableRow>
</TableHead>
<TableBody className={classes.body}>
{array.map(row => {
return (
<TableRow key={row.cryptoCode} className={classes.row}>
<TableCell component="th" scope="row">{row.cryptoCode}</TableCell>
<TableCell>        
<Switch
checked={row.acceptOrders}
onChange={this.handleChange}
// value="checkedA"
/>
</TableCell>
<TableCell>                               
<Switch
checked={row.processSendQueue}
onChange={this.handleChange}
// value="checkedB"
/>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>

Answer 1

在 onChange 方法中，您可以将索引作为参数传递给回调函数。在回调函数上，您可以编辑行对象并设置状态。 像这样：

handleChange: function(rowIndex){
var array = this.state.array;
array[rowIndex][isChecked] = !array[rowIndex][isChecked];
this.setState({array: array});
}
render: function(){
return(
...
<Switch
checked={row.acceptOrders}
onChange={this.handleChange.bind(this,index)}
value={row.isChecked}
/> 
... 
);
}