前言
在上一篇文章中,我们介绍了react-hook-form-mui
如何与与后端数据联调。在实际项目中,从后端获取的数据可能是复杂的数据对象,本文将介绍,如何通过react-hook-form-mui
实现一个包含内嵌表单元素的表单
Demo
import React from 'react';
import { useForm } from 'react-hook-form';
import { Button, MenuItem } from '@mui/material';
import { FormContainer, TextFieldElement } from 'react-hook-form-mui';
//内嵌表单元素
const InnerForm = ({ index }: any) => {
return (
<>
<TextFieldElement name={`items[${index}].name`} label="Name" />
<TextFieldElement
name={`items[${index}].quantity`}
label="Quantity"
type="number"
/>
</>
);
};
const MyForm = () => {
const formContext = useForm({
defaultValues: {
firstName: '',
lastName: '',
email: '',
gender: '',
age: '',
items: [{ name: '', quantity: '' }]
}
});
const { watch } = formContext;
const onSubmit = (data) => {
console.log(data);
};
return (
<FormContainer
formContext={formContext}
onSuccess={(data) => {
onSubmit(data);
}}
>
<TextFieldElement name="firstName" label="First Name" />
<TextFieldElement name="lastName" label="Last Name" />
<TextFieldElement name="email" label="Email" />
<TextFieldElement select name="gender" label="Gender">
<MenuItem value="male">Male</MenuItem>
<MenuItem value="female">Female</MenuItem>
</TextFieldElement>
<TextFieldElement name="age" label="Age" type="number" />
{watch('items')?.map((_, index) =>
<InnerForm key={index} index={index} />
)}
//像数组中插入表新的元素
<Button
type="button"
onClick={() => watch('items').push({ name: '', quantity: '' })}
>
Add Item
</Button>
<Button type="submit">Submit</Button>
</FormContainer>
);
};
export default MyForm;
解析
//内嵌表单元素
const InnerForm = ({ index }: any) => {
return (
<>
<TextFieldElement name={`items[${index}].name`} label="Name" />
<TextFieldElement
name={`items[${index}].quantity`}
label="Quantity"
type="number"
/>
</>
);
};
以上代码是实现内嵌表单元素的关键代码,了解以上代码,我们需要了解react-hook-form-mui
的核心理念。它是通过获取表单元素的name,生成数据结构数。因此,对于内嵌的组件而言,我们需要通过index来给name赋值。这样就可以获取到内嵌表单元素的表单值。
总结
以上是关于React-hook-form-mui
的内嵌表单元素的讲解。希望本文会对你有所帮助。如果有什么问题,可在下方留言沟通。
原文地址:https://blog.csdn.net/m0_73117087/article/details/132443957
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_5029.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。