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

Posted 2023-02-22

【中文标题】从子 React Reactive Form 更新父状态变量

【英文标题】：Update parent state variable from child 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，所以你也可以查看。

【参考方案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 /> 组件应该允许它在父组件更新时重新渲染。在您给定的示例中（感谢您提供示例），这也可以解决问题。