如何预填充一个react表单

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;

我的表格上的编辑按钮将Modal的可见属性设置为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对象作为<Formik>组件的initialValues。请注意，您可能必须将enableReinitialize道具设置为true，因此当initialValues道具更改时，Formik可以重置表单。