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方法中，您可以将索引作为参数传递给回调函数。在回调函数上，编辑行对象和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}
          /> 
          ... 
      );
   }

表格内的Material-ui开关

1 个答案: