表内的 Material-ui 开关答案

【问题标题】：Material-ui Switch inside a Table表内的 Material-ui 开关
【发布时间】：2018-09-05 13:45:12
【问题描述】：

我有下面的代码来在材料 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>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

在您的 onChange 方法中，您可以将索引作为参数传递给回调函数。在回调函数中，您编辑行对象和 setState。比如：

   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}
          /> 
          ... 
      );
   }

【讨论】：