网站认证主体,网页设计师工资一般多少钱,如何设计好的网页,北京网站优化专家前言
在上一篇文章中#xff0c;我们介绍了react-hook-form-mui的基础用法。本文将着表单数据处理。 react-hook-form-mui提供了丰富的表单数据处理功能#xff0c;可以通过watch属性来获取表单数据。
Demo
下面是一个使用watch属性的例子#xff1a;
import React from…前言
在上一篇文章中我们介绍了react-hook-form-mui的基础用法。本文将着表单数据处理。 react-hook-form-mui提供了丰富的表单数据处理功能可以通过watch属性来获取表单数据。
Demo
下面是一个使用watch属性的例子
import React from react;
import { useForm } from react-hook-form;
import { Button } from mui/material;
import { FormContainer, TextFieldElement } from react-hook-form-mui;export interface UserSettings {firstName: string;lastName: string;
}const MyForm () {const formContext useFormUserSettings({defaultValues: {firstName: ,lastName: }});// 使用 watch 属性获取表单数据const { watch } formContext;const formData watch();const onSubmit (data) {console.log(data);};const handleGetDataClick () {const { firstName, lastName } formData;console.log(firstName); //输出 firstNameconsole.log(lastName); //输出 lastNameconsole.log(formData); //输出 { firstName: xx, lastName: xx }};return (FormContainerformContext{formContext}onSuccess{(data) {onSubmit(data);}}TextFieldElement namefirstName labelFirst Name /TextFieldElement namelastName labelLast Name /Button onClick{handleGetDataClick}Get Form Data/ButtonButton typesubmitSubmit/Button/FormContainer);
};export default MyForm;从以上的demo不难看出我们能够通过watch很轻易的去获取表单元素的值而不需要通过useState的方式去获取能够减少项目中的不必要的代码。
总结
以上是关于React-hook-form-mui的表单数据处理。希望本文会对你有所帮助。如果有什么问题可在下方留言沟通。
