Блог

У меня есть таблица, в которой хранятся учащиеся с кнопкой редактирования, которая открывает форму 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 amp;amp; touched.firstName amp;amp; (
          <Tag style={tagStyle}>{errors.firstName}</Tag>
        )}
        <Input
          style={inputMargin}
          name="lastName"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.lastName}
          placeholder="Last name"
        />
        {errors.lastName amp;amp; touched.lastName amp;amp; (
          <Tag style={tagStyle}>{errors.lastName}</Tag>
        )}
        <Input
          style={inputMargin}
          type="email"
          name="email"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.email}
          placeholder="Email"
        />
        {errors.email amp;amp; touched.email amp;amp; (
          <Tag style={tagStyle}>{errors.email}</Tag>
        )}
        <Input
          style={inputMargin}
          name="gender"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.gender}
          placeholder="Gender"
        />
        {errors.gender amp;amp; touched.gender amp;amp; (
          <Tag style={tagStyle}>{errors.gender}</Tag>
        )}

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

export default EditStudentFrom;
 

кнопка eddit на моей таблице устанавливает свойство visible для модального значения true, чтобы открыть форму

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

как мне установить начальные значения формы в качестве значений для учащегося в той же строке, что и кнопка редактирования, мне действительно нужен идентификатор учащегося, чтобы я мог передать его на серверную часть следующим образом

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

Чтобы использовать форму для редактирования объектов учащихся, вам необходимо передать student объект в качестве <Formik> начальных значений компонента. Обратите внимание , что вам, вероятно, придется установить enableReinitialize реквизит на true , чтобы Formik мог сбросить форму при изменении initialValues реквизита.