从子 React Reactive Form 更新父状态变量答案

【问题标题】：Update parent state variable from child React Reactive Form从子 React Reactive Form 更新父状态变量
【发布时间】：2020-12-19 11:49:22
【问题描述】：

我正在尝试使用 next 框架探索 react 库。由于我是angular 开发人员，我喜欢将我的一些reactive-form 重用到我的新应用程序中。我找到了this 库，因为它具有几乎相同的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>
  )
}

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

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

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

我创建了一个sample app，所以你也可以查看。

【问题讨论】：

标签： reactjs react-hooks next.js reactive-forms

【解决方案1】：

您似乎需要将strict 属性设置为false 以获取FieldGroup，如下所述：https://github.com/bietkul/react-reactive-form/blob/master/docs/api/FieldGroup.md

strict: boolean;

默认值：真

如果为 true，那么它只会在表单组控件发生任何更改时才重新渲染组件，而与父组件（状态和道具）的更改无关。

【讨论】：

【解决方案2】：

我不知道这个库，但在我看来，FormGroup 似乎没有重新渲染，因为它的任何道具都没有被更改。

文档说将strict={false} 传递给<FieldGroup /> 组件应该允许它在父组件更新时重新渲染。在您给定的示例中（感谢您提供示例），这也可以解决问题。

【讨论】：