Question

一些信息

我正在为项目使用Formik，设置如下：

|-MenuModal
|--MenuEdit
|---MenuEditForm

MenuModal是MenuEdit和MenuEditForm的父项。组件MenuEditForm负责返回Formik表单，但我在其父项MenuModal中调用提交，后者稍后通过React的引用在MenuEdit中运行Submit函数。乱？是的！

我的问题

现在，我正在尝试使用状态和回调函数将Formiks values从MenuEditForm移到MenuEdit。但是由于我没有使用Formiks自己的onSubmit：

    <Formik
        initialValues={menu}
        validationSchema={validationSchema}
        onSubmit={values => console.log('values', values)} // 'values' is undefined
        ...

我的values将是未定义的，并且我无法使自己的Submit函数通过。

所以我想知道如何访问values中的MenuEditForm，以便以后将其传递给MenuEdit并完成我的提交功能。

感谢阅读。

Answer 1

要访问formik组件之外的值，可以使用钩子执行此操作：

class Parent(models.Model):
    child_name = models.TextField(default='%(class)s')

class ChildA(Parent):
    . . .

class ChildB(Parent):
    . . .

然后，可以在组件外部的任何地方使用formRef.current.values访问值。

Answer 2

您只需传递一个函数即可从子组件接收值。

例如：

MenuModal：

const MenuModal = () => {
  const [values, setvalues] = useState();
  return (
    ...
      <MenuEdit values={values} onFormSubmit={(values) => setvalues(values)} />
    ...
  );
}

MenuEdit：

const MenuEdit = ({values, onFormSubmit}) => {
    // do something with values
    return (
      ...
      <MenuEditForm onFormSubmit={onFormSubmit} />
      ...
    )
  ...  
}

MenuEditForm：

const MenuEditForm = ({onFormSubmit}) => (
  ...
  <Formik
    initialValues={menu}
    validationSchema={validationSchema}
    onSubmit={values => onFormSubmit(values)}
  ...
)

Answer 3

由于 formik 将值传递给 onChangeText 我们可以将其保存在 useState 中以进行动态更新

  onChangeText={(value: string) => {
      handleChange('name')(value);
      setName(value);
  }}

在组件之外访问Formik的值|反应

一些信息

我的问题

3 个答案: