React-hook-form-mui基本使用教程(入门篇)

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 = () => {
  // 使用 useForm 声明一个 formContext
  const formContext = useForm<UserSettings>({
    // 初始化表单数据
    defaultValues: {
      firstName: '',
      lastName: ''
    }
  });
  // 表单提交时的回调函数
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    // 使用 FormContainer 包裹表单组件
    <FormContainer
        formContext={formContext}
        // 表单提交成功时的回调函数
        onSuccess={(data) => {
          onSubmit (data);
        }}
      >
        {/* 使用 TextFieldElement 渲染表单组件 */}
        <TextFieldElement name="firstName" label="First Name" />
        <TextFieldElement name="lastName" label="Last Name" />
        <Button type="submit">Submit</Button>
    </FormContainer>
  );
};
export default MyForm;