当前位置：首页 > news >正文

React-hook-form-mui（五）：包含内嵌表单元素的表单

news 2025/8/22 4:43:14

前言

在上一篇文章中，我们介绍了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" /><TextFieldElementname={`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 (<FormContainerformContext={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} />)}//像数组中插入表新的元素<Buttontype="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" /><TextFieldElementname={`items[${index}].quantity`}label="Quantity"type="number"/></>);
};