如何在react js中用数组值在循环内设置MUI输入值?

How to set MUI input value inside loop with array value in react js?

提问人:Kishan Bhensadadiya 提问时间:8/14/2023 最后编辑:Kishan Bhensadadiya 更新时间:8/14/2023 访问量:98

问:

我使用 React MUI 创建了 React js 演示。我为每个调用的输入制作了一个单独的组件,并将其用于每个文本框。我的问题是,当我将这个组件用于任何单个信息时,它工作正常,但是我准备了一个用于教育的数组,我想在JSX中使用循环将每个教育设置在单独的输入框中,但它不起作用。InputText.jsuseState

我已经使用控制器方法管理了输入验证。react-hook-form

请检查我所有的代码并帮助我解决此问题

组件/InputText.js

import * as React from "react";
import { useState } from "react";
import TextField from "@mui/material/TextField";
import { PropTypes } from "prop-types";
import { Controller } from "react-hook-form";

const InputText = React.forwardRef(({ control, ...rest }, ref) => {

  const [textValue, setTextValue] = useState("");
  const onTextChange = (e, field) => {
    setTextValue(e.target.value);
    return rest.onChange(e);
  };
  return (
    <Controller
      name={rest.name}
      rules={rest.rules}
      control={control}
      render={({ field }) => (
        <TextField
          fullWidth
          onChange={e => {
            onTextChange(e, field);
          }} 
          label={rest.label}
          type={rest.type}
          value={textValue}
          helperText={rest.helperText}
          disabled={rest.disabled}
          {...field}
          ref={ref}
          //onChange={onTextChange}
        />
      )}
    />
  );
});

InputText.defaultProps = {
  type: "text",
  name: "",
  label: "Field",
  value: "",
  disabled: false,
};
InputText.propTypes = {
  label: PropTypes.string,
  value: PropTypes.string,
};

export default InputText;

组件/AddEditUser.js

import * as React from "react";
import InputText from "./InputText.js";
import DatePicker from "./DatePicker.js";
import { useForm } from "react-hook-form";
import Grid from "@mui/material/Unstable_Grid2";
import MIButton from "./Button.js";
import { post, get, patch } from "../utils/ApiServices.js";
import { noti } from "../utils/helper.js";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useNavigate, useParams } from "react-router-dom";
import dayjs from "dayjs";
import { Backdrop, CircularProgress } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
const schema = yup.object({
  firstName: yup.string().required("Please enter first name"),
  lastName: yup.string().required("Please enter last name"),
  email: yup
    .string()
    .required("Please enter email")
    .matches(
      /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
      "Please enter valid email"
    ),
  birthDate: yup
    .date("Please select valid date")
    .typeError("Please select valid birth date")
    .required("Please enter birth date"),
});

export default function AddEditUser() {
  const { id } = useParams();
  const [education, setEducation] = React.useState([
    {
      education: "BCA",
      location: "Ahmedabad",
    },
    {
      education: "MCA",
      location: "USA",
    },
  ]);

  let formData = {
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    birthDate: "",
    age: "",
    edu: education,
  };
  const navigate = useNavigate();
  const {
    control,
    setValue,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: formData,
    resolver: yupResolver(schema),
  });

  const [age, setAge] = React.useState("");
  const [loading, setloading] = React.useState(id ? true : false);

  const onInputChange = (e) => {
    console.log("Its parent component............ ", e);
  };
  const onDateAccept = (date) => {
    var dob = new Date(date.$d);
    var month_diff = Date.now() - dob.getTime();
    var age_dt = new Date(month_diff);
    var year = age_dt.getUTCFullYear();
    var age = Math.abs(year - 1970);
    setValue("age", age);
  };

  //Submit form
  const onSubmit = (data) => {
    let params = data;
    let query = id ? patch("user/" + id, params) : post("user", params);
    query
      .then(({ data }) => {
        noti(
          "success",
          "User " + (id ? "updated" : "added") + " successfully."
        );
        navigate("/");
      })
      .catch((error) => {
        noti("error", error);
      });
  };

  //Set user form data
  React.useEffect(() => {
    if (id) {
      get("user/" + id)
      .then(({ data }) => {
        setValue("firstName", data.data["firstName"]);
        setValue("lastName", data.data["lastName"]);
        setValue("email", data.data["email"]);
        setValue("phone", data.data["phone"]);
        setValue("birthDate", dayjs(data.data["birthDate"]));
        setloading(false);
      })
      .catch((error) => {
        noti("error", error);
      });
    }
  }, []);

  const addEducation = () => {
    formData.edu.push({
      education: "Bvoc",
      location: "Junagadh",
    });
    setEducation(formData.edu);
    console.log("Add edu--> ", formData);
  };
  console.log(id);

  return (
    <>
      <h2>{id ? "Edit" : "Add"} User</h2>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Backdrop
          sx={{ color: "#5ac8fa", zIndex: (theme) => theme.zIndex.drawer + 1 }}
          open={loading}
        >
          <CircularProgress color="inherit" />
        </Backdrop>
        <Grid
          container
          spacing={5}
          alignItems="center"
          justifyContent="center"
          columns={12}
          style={{ marginTop: "10px", textAlign: "center" }}
        >
          <Grid xs={6}>
            <InputText
              label={"First Name"}
              name="firstName"
              onChange={onInputChange}
              control={control}
              // rules={{
              //   required: "Please enter first name",
              //   maxLength: {
              //     value: 10,
              //     message: "Please enter max 10 character only",
              //   },
              //   minLength: {
              //     value: 2,
              //     message: "Please enter min 2 character",
              //   },
              // }}
              helperText={errors.firstName?.message}
            />
          </Grid>
          <Grid xs={6}>
            <InputText
              label={"Last Name"}
              name="lastName"
              onChange={onInputChange}
              control={control}
              helperText={errors.lastName?.message}
            />
          </Grid>
          <Grid xs={6}>
            <InputText
              label={"Email"}
              name="email"
              onChange={onInputChange}
              control={control}
              helperText={errors.email?.message}
              disabled={id ? true : false}
            />
          </Grid>
          <Grid xs={6}>
            <InputText
              label={"Phone"}
              name="phone"
              type="number"
              onChange={onInputChange}
              control={control}
              helperText={errors.phone?.message}
            />
          </Grid>
          <Grid xs={6}>
            <DatePicker
              label={"Birth Date"}
              name="birthDate"
              onAccept={onDateAccept}
              control={control}
              helperText={errors.birthDate?.message}
              disableFuture
              openTo="year"
            />
          </Grid>
          <Grid xs={6}>
            <InputText
              label={"Age"}
              name="age"
              onChange={onInputChange}
              control={control}
              value={age}
              disabled
            />
          </Grid>
        </Grid>
        {formData.edu.map((row, index) => (
          <Grid container spacing={5} columns={12} key={index}>
            <Grid xs={6}>
              {row.education}
              <InputText
                label={"Education"}
                name={row.education}
                onChange={onInputChange}
                control={control}
                value={row.education}
                //helperText={errors.lastName?.message}
              />
            </Grid>
            <Grid xs={6}>
              {row.location}
              <InputText
                label={"Location"}
                name="location"
                onChange={onInputChange}
                control={control}
                value={row.location}
                helperText={errors.lastName?.message}
              />
            </Grid>
          </Grid>
        ))}
        <AddIcon style={{ cursor: "pointer" }} onClick={addEducation} />
        <MIButton
          label={id ? "Update" : "Save"}
          type="submit"
          style={{ marginTop: "2%", marginBottom: "1%" }}
        />
      </form>
    </>
  );
}

我是 React js 的新手,因此非常欢迎建议和修复。如果仍然需要任何进一步的细节,请告诉我并分享您的答案,因此我可以解决上述问题。


谢谢!🙏🙏

javascript reactjs material-ui react-hook-form setvalue

评论


答:

0赞 Kishan Bhensadadiya 8/14/2023 #1

这是答案!

<InputText
  label={"Education"} 
  name={`edu[${index}].education`}
  onChange={onInputChange}
  control={control}
  value={row.education}
/>

我已将名称用作 name={},它运行良好edu[${index}].education