React-hook-form-mui(四):使用reset与初始化后端数据

2023-12-27 10:36:02

前言

在上一篇文章中,我们介绍了react-hook-form-mui的表单验证功能。本文将从实际项目出发,介绍在真实项目中,如何与后端数据联调并初始化页面数据。
react-hook-form-mui提供了 reset方法,当页面初始化的时候,调用后端数据,并通过reset方法,初始化表单的数据。

代码

以下代码简单的讲解了最基础的一种与后端联调的方式:

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 = useForm<UserSettings>({
    defaultValues: {
      firstName: '',
      lastName: ''
    }
  });

  const [loading, setLoading] = useState<boolean>(false);

  const onSubmit = (data) => {
    console.log(data);
  };

  React.useEffect(() => {
    setLoading(true);
    //获取后端数据
    getUserSetting<UserSettings>.then(
      (res: UserSettings) => {
        // 重置表单数据
        formContext.reset(res);
        setLoading(false);
      }
    );
  }, []);

  return (
    <FormContainer
      formContext={formContext}
      onSuccess={(data) => {
        onSubmit(data);
      }}
    >
      <TextFieldElement name="firstName" label="First Name" />
      <TextFieldElement name="lastName" label="Last Name" />
      <Button type="submit">Submit</Button>
    </FormContainer>
  );
};

export default MyForm;

在以上demo中,我们获取完后端数据后,通过reset方法重置表单数据,从而达到初始化页面的目的。

总结

以上是关于React-hook-form-mui的页面初始化的讲解。希望本文会对你有所帮助。如果有什么问题,可在下方留言沟通。

文章来源:https://blog.csdn.net/m0_73117087/article/details/132443873
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。