阿里云网站建设的实训报告,网站名称去哪里注册,计算机网站建设维护的目的,程建网前言
在上一篇文章中#xff0c;我们介绍了react-hook-form-mui如何与与后端数据联调。在实际项目中#xff0c;从后端获取的数据可能是复杂的数据对象#xff0c;本文将介绍#xff0c;如何通过react-hook-form-mui实现一个包含内嵌表单元素的表单
Demo
以下代码实现了…前言
在上一篇文章中我们介绍了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} labelName /TextFieldElementname{items[${index}].quantity}labelQuantitytypenumber//);
};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 namefirstName labelFirst Name /TextFieldElement namelastName labelLast Name /TextFieldElement nameemail labelEmail /TextFieldElement select namegender labelGenderMenuItem valuemaleMale/MenuItemMenuItem valuefemaleFemale/MenuItem/TextFieldElementTextFieldElement nameage labelAge typenumber /{watch(items)?.map((_, index) InnerForm key{index} index{index} /)}//像数组中插入表新的元素ButtontypebuttononClick{() watch(items).push({ name: , quantity: })}Add Item/ButtonButton typesubmitSubmit/Button/FormContainer);
};export default MyForm;解析
//内嵌表单元素
const InnerForm ({ index }: any) {return (TextFieldElement name{items[${index}].name} labelName /TextFieldElementname{items[${index}].quantity}labelQuantitytypenumber//);
};以上代码是实现内嵌表单元素的关键代码了解以上代码我们需要了解react-hook-form-mui的核心理念。它是通过获取表单元素的name生成数据结构数。因此对于内嵌的组件而言我们需要通过index来给name赋值。这样就可以获取到内嵌表单元素的表单值。
总结
以上是关于React-hook-form-mui的内嵌表单元素的讲解。希望本文会对你有所帮助。如果有什么问题可在下方留言沟通。
