时间戳

首页 > 解决方案 > 从子 React Reactive Form 更新父状态变量

reactjs - 从子 React Reactive Form 更新父状态变量

问题描述

我正在尝试使用框架探索react库。next因为我是一名angular开发人员，所以我喜欢在reactive-form我的新应用程序中重用我的一些。我找到了这个库，因为它具有几乎相同的reactive-form.

现在，我state在父表单上使用变量；但是，每当我尝试从子项（这是反应形式）更新值时。我无法完成它。

这是我复制它的简单代码。

import React, { useState } from "react";
import { FieldGroup, FieldControl } from "react-reactive-form";

export default function App() {
  const [isRegistered, setIsRegistered] = useState(false);

  async function submitForm(e) {
    e.preventDefault();
    setIsRegistered(state => !state);
    console.log(isRegistered);
    //await function call .....
  }

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <FieldGroup
        control={form}
        render={({ get, invalid }) => (
          <form onSubmit={submitForm}>
            <FieldControl
              name="email"
              render={TextInput}
              meta={{ label: "Email" }}
            />
            <button type="submit">Submit</button>
            <p>{isRegistered.toString()}</p>
            {isRegistered ? <span>Registered Successfully</span> : null}
          </form>
        )}
      />
      
    </div>
  )
}

只是为了简短起见，formandTextInput只是一个模型和一个元素。

如您所见，我submitForm通过将其作为onSubmit表单的函数来更新函数上的状态变量；但是，我可以submitForm在尝试提交时触发，但state variable值不会改变。

问题是，当我尝试submitForm在 (FieldGroup) 之外调用该函数child时，我能够更新该值。

我创建了一个示例应用程序，因此您也可以检查。

标签： reactjsreact-hooksnext.jsreactive-forms

解决方案

似乎您需要将strictprop 设置为falsefor FieldGroup，如下所述：https ://github.com/bietkul/react-reactive-form/blob/master/docs/api/FieldGroup.md

strict: boolean;

默认值：真

如果为 true，则仅当表单组控件发生任何更改时才会重新渲染组件，而不管父组件（状态和道具）是否更改。

推荐阅读