快捷導(dǎo)航

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

更新時間：2024年02月19日 11:05:19 作者：Evan不懂前端

react-hook-form-mui可以幫助開發(fā)人員更輕松地構(gòu)建表單,它結(jié)合了React?Hook?Form和Material-UI組件庫,使用react-hook-form-mui,開發(fā)人員可以更快速地構(gòu)建表單,并且可以輕松地進(jìn)行表單驗證和數(shù)據(jù)處理,本文介紹React-hook-form-mui基本使用,感興趣的朋友一起看看吧

前言

在項目開發(fā)中，我們選擇了React+MUI作為技術(shù)棧。在使用MUI構(gòu)建form表單時，我們發(fā)現(xiàn)并沒有與antd類似的表單驗證功能，于是我們選擇了MUI推薦使用的react-hook-form-mui庫去進(jìn)行驗證。但是發(fā)現(xiàn)網(wǎng)上關(guān)于這個庫的使用方法和demo比較少且比較簡單，并沒有復(fù)雜的表單驗證的demo。
因此本文及以下幾篇文章，會從簡到難講解如何使用。希望通過這幾篇文章的介紹，能夠幫助你入門react-hook-form-mui

優(yōu)勢介紹

react-hook-form-mui可以幫助開發(fā)人員更輕松地構(gòu)建表單，它結(jié)合了React Hook Form和Material-UI組件庫。它提供了一些預(yù)定義的表單組件，如TextFieldElement、CheckboxElement、等，可以直接使用。此外，它還提供了一些自定義的表單組件，如PasswordElement、DatePickerElement等，可以根據(jù)需要進(jìn)行定制。
使用react-hook-form-mui，開發(fā)人員可以更快速地構(gòu)建表單，并且可以輕松地進(jìn)行表單驗證和數(shù)據(jù)處理。

簡單Demo

下面是一個以React MUI 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';
// 定義表單數(shù)據(jù)類型
export interface UserSettings{
  firstName: string;
  lastName: string;
}
const MyForm = () => {
  // 使用 useForm 聲明一個 formContext
  const formContext = useForm<UserSettings>({
    // 初始化表單數(shù)據(jù)
    defaultValues: {
      firstName: '',
      lastName: ''
    }
  });
  // 表單提交時的回調(diào)函數(shù)
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    // 使用 FormContainer 包裹表單組件
    <FormContainer
        formContext={formContext}
        // 表單提交成功時的回調(diào)函數(shù)
        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;

首先，我們通過useForm來聲明一個formContext, 在formContext可以聲明defaultValues來初始化form表單的值。

其次, 在formContainer中，聲明onSuccess方法，當(dāng)點(diǎn)擊type=‘submit’，按鈕時，會回調(diào)用其中的方法。onSuccess方法中的data參數(shù)，會返回和defaultValues中一樣的數(shù)據(jù)類型。