Material-ui Switch внутри стола

Question

У меня есть следующий код для отображения состояния переключателя внутри таблицы в пользовательском интерфейсе материала. Но я застрял на том, как добавить поведение 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}
          /> 
          ... 
      );
   }