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

问题描述

我正在尝试使用react框架探索next库。由于我是angular开发人员，因此我希望将部分reactive-form重用于新应用程序。我发现this库是因为它具有与reactive-form几乎相同的实现。

现在，我正在父表单上使用state变量；但是，每当我尝试更新child的值时（这是反应形式）。我做不到。

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

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的值不会改变。

问题是，当我尝试在submitForm（字段组）之外调用child函数时，我能够更新该值。

我创建了一个 sample app，以便您也可以检查。

解决方法

似乎您需要将strict的{{1}}属性设置为false，如此处所述：https://github.com/bietkul/react-reactive-form/blob/master/docs/api/FieldGroup.md

FieldGroup

默认值：true

如果为true，则仅在窗体组控件中发生任何更改时才重新渲染组件，而与父组件（状态和道具）的更改无关。

我不知道这个库，但是对我来说，它看起来像是FormGroup没有重新渲染，因为它的所有道具都没有被更改。

文档说，将DECLARE @tbl TABLE (val float) INSERT INTO @tbl SELECT 2.32 INSERT INTO @tbl SELECT 1234.54 INSERT INTO @tbl SELECT 1234.545 INSERT INTO @tbl SELECT 1234.5456 INSERT INTO @tbl SELECT 1234.54567 select * from @tbl where abs(val-round((val),2)) > 0.001传递到strict={false}组件也应允许它在父组件更新时也重新呈现。在您给出的示例中（感谢您提供示例），也可以解决问题。

react-hooks reactive-forms reactjs reactjs