React Hook Form - Smart Components - 当输入被包裹在一个元素中时，表单被破坏

Question

遵循教程 - https://www.react-hook-form.com/advanced-usage#SmartFormComponent) - 直到输入被包裹在一个元素中。 需要对表单组件进行哪些更改才能使其正常工作？

<Form onSubmit={(data) => setData(data)}>
    {/* wrapping the inputs breaks the form */}
    <div>
        <Input name="firstName" />
        <Input name="lastName" />
    </div>

    <button>Submit</button>
</Form>

解决这个问题的一个 hacky 方法是创建类似的东西：

const InputWithDiv = props => (
  <div>
    <Input {...props} />
  </div>
)

参考：

但这不是解决方案

示例：https://codesandbox.io/s/react-hook-form-smart-form-component-forked-8o0f9?file=/src/index.js

Answer 1

我想你必须在这里使用 FormContext。库的作者也回答了这个 discussion，建议在输入深度嵌套的情况下使用 FormContext。例如，当使用 <fieldset /> 或片段时，或者在您的情况下 <div />.

Here 是文档中的相关部分。

React Hook Form - Smart Components - 当输入被包裹在一个元素中时，表单被破坏

React Hook Form - Smart Components - form broken when Inputs are wrapped in an element

javascript

forms

reactjs

react-hook-form