Vorwort
Im vorherigen Artikel haben wir react-hook-form-muidie Formularvalidierungsfunktion vorgestellt. Dieser Artikel beginnt mit tatsächlichen Projekten und stellt vor, wie Seitendaten gemeinsam mit Back-End-Daten in realen Projekten debuggt und initialisiert werden.
react-hook-form-muiBietet reseteine Methode zum Aufrufen der Backend-Daten bei der Initialisierung der Seite und resetzum Initialisieren der Formulardaten über die Methode.
Code
Der folgende Code erklärt kurz die grundlegendste Art des gemeinsamen Debuggens mit dem Backend:
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;
In der obigen Demo resetsetzen wir die Formulardaten über die Methode zurück, nachdem wir die Back-End-Daten erhalten haben, um den Zweck der Initialisierung der Seite zu erreichen.
Zusammenfassen
Das Obige ist React-hook-form-muieine Erklärung zur Seiteninitialisierung. Ich hoffe, dieser Artikel wird Ihnen hilfreich sein. Wenn Sie Fragen haben, können Sie unten eine Nachricht zur Kommunikation hinterlassen.