材质UI表-如何选择单元格

Question

我正在开发一个星期的事件调度程序，可以单击一个或多个表格单元格并将事件添加到所选的单元格中。但是，我在选择每个单元格时遇到问题。另外，我也不知道如何识别单击事件中正在单击的单元格。

class RegisterSchedule extends Component {

        handleClick = (event) => {
          if(prueba.length == 0 || !this.mismaFila(event) ){
            console.log(event.target);
            prueba.push(event.target);
            event.target.style.backgroundColor = '#b0b0b0';
          }
        }

        mismaFila(event){
          var mismaFila = false;
          prueba.map(element => {
            if(element.parentElement == event.target.parentElement) {
              mismaFila = true;
              return mismaFila;
            } else {
              mismaFila = mismaFila || false;
            }
          });
          return mismaFila;
        }

        Unir() {
            if(prueba.length > 1){
            prueba[0].rowSpan = prueba.length;
            prueba.map((element, i) => {
            if(i != 0){
              element.remove();
            }
          })
            prueba[0].style.backgroundColor ='#FFFFFF';
            prueba = [];
        }
        }

        Desunir() {
          prueba[0].rowSpan = 1;
          var row = document.createElement('TD');
          console.log(prueba[0].parentElement);
          prueba[0].parentElement.parentElement.appendChild(row)
        }

        render() {
            const { classes } = this.props;
            return (
              <Grid container justify = 'center' >

                <Grid item xs = { 8 } md = { 8 } >
                  <Paper className = { classes.root } >
                    <Table className = { classes.table } >
                      <TableHead >
                        <TableRow >
                          <TableCell className={classes.cell} > < /TableCell>
                          <TableCell className={classes.cell} > Lunes < /TableCell>
                          <TableCell className={classes.cell} numeric > Martes < /TableCell>
                          <TableCell className={classes.cell} numeric > Miercoles < /TableCell>
                          <TableCell className={classes.cell} numeric > Jueves< /TableCell>
                          <TableCell className={classes.cell} numeric > Viernes < /TableCell>
                       </TableRow>
                     </TableHead>
                     <TableBody > {
                         rows.map((row, i) => {
                            return (
                             <TableRow selectable className = { classes.row } key = { row.id } >
                               <TableCell className={classes.cell} component = "th" scope = "row" > 10:00 </TableCell>
                               <TableCell className={classes.cell} onClick = { this.handleClick }numeric > { row.calories } < /TableCell>
                               <TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.fat } </TableCell>
                               <TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.carbs } </TableCell>
                               <TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.protein } < /TableCell>
                               <TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.protein } < /TableCell>
                            </TableRow>
                        );
                    })
                } 
                   </TableBody>
                  </Table>
                </Paper>
                <Button onClick={this.Unir}>Unir</Button>
                <Button onClick={this.Desunir}>Desunir</Button>
              </Grid>
            </Grid>
            );
        }
    }

这是我尝试处理此问题的方式。我不知道这是否是一个好习惯，但我也不知道该采用哪种方法