来自嵌套组件的 Formik 字段未更新

Question

我有以下场景：

具有 Formik 处理的几个字段的主要组件。这里一切都很好。
在主窗体内部呈现的子组件，使用 Formik 的 Field 组件，与主组件中的字段相同。这些字段没有更新。

主要成分：

...
return (
 <Formik
   enableReinitialize
   initialValues={{
     name: this.state.name,
     newName: this.state.newName, // this field is inside the nested component
   }}
   validationSchema={mySchema}
   onSubmit={...}
 >
   {
     ({ errors, values, ... }) => (
       <Form ref={this.formRef}>
         ...
         <Field name="name" type="text" />
         ...
         <NewNameForm />
       </Form>
     )
   }
 </Formik>
);

NewNameForm 组件：

...
return (
  <div>
    <Field name="newName" type="text" />
  </div>
);

我的方法是不是错了，我可以像这样嵌套带有额外字段的组件吗？ newName 没有得到更新所以我显然做错了什么。

Answer 1

我通过将 Formik 的 setFieldValue 方法传递给子组件的 props 解决了这个问题，如下所示：

onNameChange={(name) => {
  setFieldValue('newName', name);
}}

来自嵌套组件的 Formik 字段未更新

Formik field from nested component not updating

javascript

formik