react-hook-form v6 中父组件如何订阅子组件的“formState.isDirty”？答案

【问题标题】：How can a parent component subscribe to child component's "formState.isDirty" in react-hook-form v6?react-hook-form v6 中父组件如何订阅子组件的“formState.isDirty”？
【发布时间】：2021-09-17 09:19:26
【问题描述】：

我的用户案例是，如果最终用户想要离开特定屏幕，并且如果该屏幕中有未保存的更改，那么应用程序会警告用户。

现在我的子组件（这个用于检查脏的特定屏幕）是一个构建在 react-hook-form v6 之上的表单，它提供了“formState.isDirty”。我的父组件位于“react-router”之上以路由到适当的屏幕

我尝试过的一件事是，在我的父组件中，利用 useState 钩子并将回调传递给子组件：

const [userDirty, setDirty] = useState(undefined)

然后在我的子组件中，我有这个：

const methods = useForm() 
useEffect(() => {
    setDirty(methods.formState.isDirty)
}, )

仅当最终用户交互与子窗体导致重新渲染时才有效。但是有时最终用户对表单进行了更改并且没有重新渲染，那么上面的代码将不起作用，因为“useEffect”仅在每次重新渲染时运行。这是一个不起作用的示例——最终用户编辑文本输入：

<Form.Control  type="text"  name="customDisplayName"
                        defaultValue={xxx}
                        ref={register}  
>

我知道一种方法是为我的子组件中的每个输入添加一个“onChange”处理程序，然后在那里“setDirty”。但它是一个复杂的表单，有很多子输入。

    <Form.Control  type="text"  name="customDisplayName"
                        defaultValue={xxx}
                        ref={register}  
                         onChange={()=>{
                          setDirty(true)
                        }}
>

有没有一种简单的方法可以做到这一点？

【问题讨论】：

标签： reactjs react-hooks react-hook-form

【解决方案1】：

我找到了答案。 API 文档有这个：(https://react-hook-form.com/v6/api/#formState)

如果您想在 useEffect 订阅 formState 更新，请确保将整个 formState 放入可选数组中。

所以一旦我将“useEffect”调整到下面，它就会按预期工作

useEffect(() => {
    seteDirty(methods.formState.isDirty)
}, [methods.formState])

【讨论】：