如何解决从子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}
组件也应允许它在父组件更新时也重新呈现。在您给出的示例中(感谢您提供示例),也可以解决问题。