我想用数组制作 mui 文本字段

Question

我的任务是我根据数组使用 TextFiled 但问题无法动态更改所有值我知道我可以根据三元条件使用此任务的索引。

const TextField = () => {
  
  return (
    <>
      <Card sx={{ mt: 4 }} variant="outlined">
        <CardContent>
          <Grid container spacing={{ xs: 2, md: 3 }}>
            {Array.fill("").map((data, index) => (
              <Grid item xs={12} sm={6} md={3} key={index}>
                 <TextField
                  id="outlined-basic"
                  label={data}
                  name={index === 0}
                  size="small"
                  variant="outlined"
                  value={data}
                />
              </Grid>
            ))}
          </Grid>
        </CardContent>
      </Card>
    </>
  );
};

Answer 1

  return (
    <>
      <Card sx={{ mt: 4 }} variant="outlined">
        <CardContent>
          <Grid container spacing={{ xs: 2, md: 3 }}>
            {Array.from([
              "organisationName",
              "organisationID",
              "manager",
              "branch",
              "product"
            ]).map((data, index) => (
              <Grid item xs={12} sm={6} md={3} key={index}>
                <TextField
                  id="outlined-basic"
                  label={data}
                  name="organisationName"
                  size="small"
                  variant="outlined"
                  value={teamForm.values.data}
                  onBlur={teamForm.handleBlur}
                  onChange={teamForm.handleChange.bind(this)}
                  error={Boolean(teamForm.errors.data)}
                  helperText={teamForm.errors.data}
                />
              </Grid>
            ))}
          </Grid>
        </CardContent>
        <CardActions>
          <Box
            display="flex"
            flexGrow={1}
            alignItems="center"
            justifyContent="flex-end"
            flexDirection="row"
          >
            <Button
              variant="contained"
              color="primary"
              onClick={teamForm.handleSubmit}
            >
              Add team
            </Button>
          </Box>
        </CardActions>
      </Card>
    </>
  )

Answer 2

import React from "react";
import {
  Grid,
  Card,
  CardContent,
  Box,
  CardActions,
  TextField,
  Button
} from "@mui/material";
import { useFormik } from "formik";
import * as Yup from "yup";

const validationSchema = Yup.object().shape({
  organisationName: Yup.string().required("Required!"),
  organisationID: Yup.string().required("Required!"),
  manager: Yup.string().required("Required!")
});

const AddNewTeam = () => {
  const teamForm = useFormik({
    initialValues: {
      organisationName: "",
      organisationID: "",
      manager: "",
      branch: "",
      product: ""
    },
    validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    }
  });
  console.log(teamForm);
  return (
    <>
      <Card sx={{ mt: 4 }} variant="outlined">
        <CardContent>
          <Grid container spacing={{ xs: 2, md: 3 }}>
            {Array.from([
              "organisationName",
              "organisationID",
              "manager",
              "branch",
              "product"
            ]).map((data, index) => (
              <Grid item xs={12} sm={6} md={3} key={index}>
                <TextField
                  id="outlined-basic"
                  label={data}
                  name="organisationName"
                  size="small"
                  variant="outlined"
                  value={teamForm.values.data}
                  onBlur={teamForm.handleBlur}
                  onChange={teamForm.handleChange.bind(this)}
                  error={Boolean(teamForm.errors.data)}
                  helperText={teamForm.errors.data}
                />
              </Grid>
            ))}
          </Grid>
        </CardContent>
        <CardActions>
          <Box
            display="flex"
            flexGrow={1}
            alignItems="center"
            justifyContent="flex-end"
            flexDirection="row"
          >
            <Button
              variant="contained"
              color="primary"
              onClick={teamForm.handleSubmit}
            >
              Add team
            </Button>
          </Box>
        </CardActions>
      </Card>
    </>
  );
};

export default AddNewTeam;