如何在循環中更改每行 mui 表單元格中的下拉列表？

Question

import * as React from "react";
import {
  Select,
  MenuItem,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper
} from "@mui/material";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
function createData(name, mobile, access) {
  return { name, mobile, access };
}

const rows = [
  createData("Sam", 9865745159),
  createData("Amily", 8723879237),
  createData("Eva", 9432671262),
  createData("Jack", 7898083305),
  createData("Diana", 8973667356)
];

export default function DenseTable() {
  const [access, setAccess] = React.useState(1);
  const handleChange = (event, index, data) => {
    setAccess(event.target.value);
  };
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell align="center">Name</TableCell>

            <TableCell align="center">Mobile</TableCell>
            <TableCell align="center">Access</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
            >
              <TableCell component="th" scope="row" align="center">
                {row.name}
              </TableCell>
              <TableCell align="center">{row.mobile}</TableCell>

              <TableCell align="center">
                <Select
                  value={access}
                  onChange={handleChange}
                  MenuProps={{
                    MenuListProps: { disablePadding: true }
                  }}
                  fullWidth
                  size="small"
                  IconComponent={() => (
                    <KeyboardArrowDownIcon
                      sx={{
                        position: "absolute",
                        right: 10,
                        width: "20px",
                        pointerEvents: "none"
                      }}
                    />
                  )}
                  sx={{
                    fontSize: "14px",
                    width: "100px",

                    height: "28px"
                  }}
                >
                  <MenuItem
                    value={1}
                    sx={{
                      fontSize: "14px",
                      height: "25px",
                      width: "100%"
                    }}
                  >
                    Allow
                  </MenuItem>
                  <MenuItem
                    value={2}
                    sx={{
                      fontSize: "14px",
                      height: "30px",
                      width: "100%"
                    }}
                  >
                    Decline
                  </MenuItem>
                </Select>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

我將 ReactJs 與 Material UI 表一起使用，表格單元格的每一行都有下拉菜單。 每當我更改一行的下拉選項時，所有行的下拉選項都會自動更改為相同的選項。我必須分別處理每一行。 如何在循環中更改每行 mui 表單元格中的下拉列表？ 文件。

Answer 1

將下拉列表移動到新的 jsx 組件並在那里管理 state

function dropdownComponent (){

      const [access, setAccess] = React.useState(1);
      const handleChange = (event, index, data) => {
        setAccess(event.target.value);
      };
      

      return  
            (<Select
                  value={access}
                  onChange={handleChange}
                  MenuProps={{
                    MenuListProps: { disablePadding: true }
                  }}
                  fullWidth
                  size="small"
                  IconComponent={() => (
                    <KeyboardArrowDownIcon
                      sx={{
                        position: "absolute",
                        right: 10,
                        width: "20px",
                        pointerEvents: "none"
                      }}
                    />
                  )}
                  sx={{
                    fontSize: "14px",
                    width: "100px",

                    height: "28px"
                  }}
                >
                  <MenuItem
                    value={1}
                    sx={{
                      fontSize: "14px",
                      height: "25px",
                      width: "100%"
                    }}
                  >
                    Allow
                  </MenuItem>
                  <MenuItem
                    value={2}
                    sx={{
                      fontSize: "14px",
                      height: "30px",
                      width: "100%"
                    }}
                  >
                    Decline
                  </MenuItem>
                </Select>
    )
}

像這樣稱呼它

  <TableCell align="center">
      <dropdownComponent />