javascript - React Hook Form - 智能组件 - 当输入被包装在元素中时表单被破坏

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>

---

解决这个问题的一个巧妙的方法是创建类似的东西:

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

引用:https://stackoverflow.com/a/66215997/2102042

但这不是解决方案

---

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

Answer 1

我认为你必须使用FormContext这里。还有这个discussion由建议使用 FormContext 的库的作者回答对于输入深度嵌套的场景。例如，当使用 <fieldset /> 时或片段或如您的情况 <div /> .

Here是文档中的相关部分。