React Material UI Table-同时切换所有切换

问题描述

我已在我的应用程序中添加了一个react mat ui表，并将开关添加到了其中一列中，但由于某些原因，它们都一起切换而不是独立切换。

我该如何更改？

  <TableBody>
            {operators.map((row) => (
              <TableRow key={row.key}>
                <TableCell component="th" scope="row">
                  {row.operator}
                </TableCell>
                <TableCell>
                  <Typography component="div">
                    <Grid
                      component="label"
                      container
                      alignItems="center"
                      // justify="flex-end"
                      spacing={1}
                    >
                      <Grid item>Off</Grid>
                      <Grid item>
                        <AntSwitch
                          checked={checkboxState.checkedC}
                          onChange={handleChange}
                          name="checkedC"
                        />
                      </Grid>
                      <Grid item>On</Grid>
                    </Grid>
                  </Typography>
                </TableCell>
                <TableCell align="right">{'<<Placement value>>'}</TableCell>
              </TableRow>
            ))}
          </TableBody>

我刚刚在沙盒中创建了一个演示给您看，但是奇怪的是它可以在那里正常运行，但不能在我的应用程序中显示。

完整的代码在我的要旨中：https://gist.github.com/SerdarMustafa1/b3214b01885980e433405987f8822fe7

和演示：https://stackblitz.com/edit/5dm8lk?file=demo.js。

任何想法出了什么问题？

解决方法

您可以使用状态数组来保留每个原始状态：

import React,{useState} from "react";
import { withStyles } from "@material-ui/core/styles";
import { purple } from "@material-ui/core/colors";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import Grid from "@material-ui/core/Grid";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import Typography from '@material-ui/core/Typography';
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import { makeStyles,withStyles } from "@material-ui/core/styles";


const AntSwitch = withStyles(theme => ({
  root: {
    width: 28,height: 16,padding: 0,display: "flex"
  },switchBase: {
    padding: 2,color: theme.palette.grey[500],"&$checked": {
      transform: "translateX(12px)",color: theme.palette.common.white,"& + $track": {
        opacity: 1,backgroundColor: theme.palette.primary.main,borderColor: theme.palette.primary.main
      }
    }
  },thumb: {
    width: 12,height: 12,boxShadow: "none"
  },track: {
    border: `1px solid ${theme.palette.grey[500]}`,borderRadius: 16 / 2,opacity: 1,backgroundColor: theme.palette.common.white
  },checked: {}
}))(Switch);

const tableStyles = makeStyles({
  table: {
    minWidth: 150
  }
});

export default function CustomizedSwitches() {
  const [gridData,setGridData] = useState([
    { key: 6,operator: "OyPohjolanLiikenne Ab",checked: false },{ key: 12,operator: "Helsingin Bussiliikenne Oy",checked: true },{ key: 17,operator: "Tammelundin Liikenne Oy",{ key: 18,operator: "Pohjolan Kaupunkiliikenne Oy",{ key: 20,operator: "Bus Travel Åbergin Linja Oy",{ key: 21,operator: "Bus Travel Oy Reissu Ruoti",checked: true }
  ]);

  const handleChange = (event,index) => {
    gridData[index].checked = event.target.checked;
    setGridData([...gridData]);
  };

  const tableClasses = tableStyles();


  return (
    <TableContainer component={Paper}>
      <Table
        stickyHeader
        className={tableClasses.table}
        size="small"
        aria-label="a dense table"
      >
        <TableHead>
          <TableRow>
            <TableCell>Operator</TableCell>
            {/* <TableCell align="right">Listed</TableCell> */}
            <TableCell>Visible</TableCell>
            <TableCell align="right">Total Placements</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {gridData.map( (row,index) => (
            <TableRow key={row.key}>
              <TableCell component="th" scope="row">
                {row.operator}
              </TableCell>
              <TableCell>
                <Typography component="div">
                  <Grid
                    component="label"
                    container
                    alignItems="center"
                    // justify="flex-end"
                    spacing={1}
                  >
                    <Grid item>Off</Grid>
                    <Grid item>
                      <AntSwitch
                        checked={row.checked}
                        onChange={(event) => handleChange(event,index)}
                        name="checkedC"
                      />
                    </Grid>
                    <Grid item>On</Grid>
                  </Grid>
                </Typography>
              </TableCell>
              <TableCell align="right">{"<<Placement value>>"}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}