如何预填充反应 formik 表单

Question

我有一个存储学生的表，带有一个编辑按钮，可以打开一个 formik 表单。

const EditStudentFrom = (props) => (
  
  
  <Formik
    initialValues={{studentId:"", firstName: "", lastName: "", email: "", gender: "" }}
    validate={(values) => {
      const errors = {};

      if (!values.firstName) {
        errors.firstName = "First name required";
      }
      if (!values.lastName) {
        errors.lastName = "Last name required";
      }

      if (!values.email) {
        errors.email = " Email required";
      } else if (
        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
      ) {
        errors.email = "Invalid Email address";
      }

      if (!values.gender) {
        errors.gender = "Gender required";
      } else if (
        !["MALE ", "male", "female", "FEMALE"].includes(values.gender)
      ) {
        errors.gender = "Gender most be ( MALE , male , FEMALE, female )";
      }

      return errors;
    }}
    onSubmit={(student, { setSubmitting }) => {
      editStudent(student.studentId,student).then(() => {
      props.onSuccess();

        setSubmitting(false);
      });
    }}
  >
    {({
      values,

      errors,

      touched,

      handleChange,

      handleBlur,

      handleSubmit,

      isSubmitting,

      submitForm,
      isValid,

      /* and other goodies */
    }) => (
      <form onSubmit={handleSubmit}>
        
        <Input
          style={inputMargin}
          name="firstName"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.firstName}
          placeholder="First name"
        />

        {errors.firstName && touched.firstName && (
          <Tag style={tagStyle}>{errors.firstName}</Tag>
        )}
        <Input
          style={inputMargin}
          name="lastName"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.lastName}
          placeholder="Last name"
        />
        {errors.lastName && touched.lastName && (
          <Tag style={tagStyle}>{errors.lastName}</Tag>
        )}
        <Input
          style={inputMargin}
          type="email"
          name="email"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.email}
          placeholder="Email"
        />
        {errors.email && touched.email && (
          <Tag style={tagStyle}>{errors.email}</Tag>
        )}
        <Input
          style={inputMargin}
          name="gender"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.gender}
          placeholder="Gender"
        />
        {errors.gender && touched.gender && (
          <Tag style={tagStyle}>{errors.gender}</Tag>
        )}

        <Button
          onClick={() => submitForm()}
          type="submit"
          disabled={isSubmitting | (touched && !isValid)}
        >
          Submit
        </Button>
      </form>
    )}
  </Formik>
);
   
     

export default EditStudentFrom;

我桌子上的 eddit 按钮将 Modal 上的 visible 属性设置为 true 以打开表单

       {
          title:"",
          Key:"buttom",    
          render:(value, student)=>(<Button onClick={this.openEditStudentModal}                 
         >Edit</Button>)
                           
        }

我如何将表单的 initialValues 设置为与编辑按钮在同一行的学生的值我真的需要 studentId 这样我就可以像这样将它传递到后端

export const editStudent= (studentId,student)=> 
fetch(`http://localhost:1020/api/students/${studentId}`, {
  method: "PUT",
  body: JSON.stringify(student),
  headers: {
    "Content-Type": "application/json",
  },
});

Answer 1

为了使用表单来编辑学生对象，您需要将student object 作为<Formik>组件的初始值传递。 请注意，您可能必须将enableReinitialize属性设置为true ，以便 Formik 可以在initialValues属性更改时重置表单。