[英]How to display defaultValues with useFieldArray hook in controlled components in react-hook-forms
I would like to have a field array that can be generated by the user by adding an infinite number of key/value pairs of input text fields.我想要一个可以由用户通过添加无限数量的输入文本字段的键/值对来生成的字段数组。 After submitting the form the fields should be saved and when coming back to the form the submitted field array should be displayed and have the same functionality.
提交表单后,应保存字段,当返回表单时,应显示提交的字段数组并具有相同的功能。 Meaning the user should be again able to add new key/value pairs of input text field or to delete them.
这意味着用户应该能够再次添加输入文本字段的新键/值对或删除它们。
The form has separate components and one of them uses React Hook Form's useFieldArray hook.该表单具有单独的组件,其中一个使用 React Hook Form 的 useFieldArray 钩子。 The input components are controlled components.
输入组件是受控组件。
I made a simple app on codesandbox .我在codesandbox上做了一个简单的应用程序。
At first if you click on the add button everything looks fine.起初,如果您单击添加按钮,一切看起来都很好。 Fields get added and submitted.
字段被添加并提交。
But I can't figure out how to display the fieldset
prop values passed to the ArrayFields component, see index.js:30
但我不知道如何显示传递给
fieldset
组件的字段集道具值,请参阅index.js:30
<ArrayFields
fieldset={[
{ envName: "foo1", envRole: "bar1" },
{ envName: "foo2", envRole: "bar2" }
]}
/>
I tried setting defaultValues with the useForm hook, but it didn't work.我尝试使用 useForm 挂钩设置 defaultValues,但没有成功。
I'm a newbee to react and of course react hook form.我是一个反应的新手,当然反应钩子形式。 If I understand react hook form right then anyway it's better to rely on the useFormContext hook and use the fields from the useFieldArray hook, see
ArrayFields.js:6
.如果我理解反应钩子形式,那么无论如何最好依赖 useFormContext 钩子并使用 useFieldArray 钩子中的字段,请参阅
ArrayFields.js:6
。
In ArrayFields.js:24-26
I tried to copy over the props in order to merge the fields with the fieldset.在
ArrayFields.js:24-26
中,我尝试复制道具以将字段与字段集合并。
const allFields = [...fields]; // This does not display the passed prop values, alias fieldset
// const allFields = [...fieldset]; // This displays the passed prop values but adding field no longer works.
// const allFields = [...fieldset, ...fields]; // This results in weird add button adding multiple fields at once.
So what could I do here?那么我能在这里做什么呢? Thanks a lot for your comments.
非常感谢您的评论。
The app is based on该应用程序基于
React Hook Form 7
React 17
Instead of passing default values to ArrayFields
component just set default values in useForm hook like this.无需将默认值传递给
ArrayFields
组件,只需像这样在 useForm 挂钩中设置默认值。
const methods = useForm({
defaultValues: {
email: "john.smith@example.com",
firstName: "John",
lastName: "Smith",
systemRole: "Admin",
envRoles: [
{ envName: "foo1", envRole: "bar1" },
{ envName: "foo2", envRole: "bar2" }
]
}
});
Check this codesandbox .检查此代码框。 I updated your code.
我更新了你的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.