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

Question

按照教程 - https://www.react-hook-form.com/advanced-usage#SmartFormComponent） - 工作，直到输入被包装在一个元素中。需要对 Form 组件进行哪些更改才能使其工作？

<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 ://stackoverflow.com/a/66215997/2102042

但这不是解决方案

---

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

标签： javascriptreactjsformsreact-hook-form

Answer 1

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

这是文档中的相关部分。