快捷導(dǎo)航

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

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

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

前言

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

優(yōu)勢(shì)介紹

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

簡(jiǎn)單Demo

下面是一個(gè)以React MUI react-hook-form-mui簡(jiǎn)單用例

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

首先，我們通過(guò)useForm來(lái)聲明一個(gè)formContext, 在formContext可以聲明defaultValues來(lái)初始化form表單的值。

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