react 表单管理

受控模式

import _ from 'lodash';
import cn from '@/utils/cn';
import * as api from '../api';
import { useState } from 'react';
import { match } from 'ts-pattern';type SubmitResult = { type: 'idle' | 'success' | 'error'; data: string };
type FormDataState = { uname: string; comment: string };const initDate = {submitResult: { type: 'idle', data: '' },formData: { uname: '', comment: '' },
};// React 18实现（受控来管理"表单"）
export default function formDemo() {const [isPending, setIsPending] = useState(false);const [submitResult, setSubmitResult] = useState<SubmitResult>(_.cloneDeep(initDate.submitResult));const [formData, setFormData] = useState<FormDataState>(_.cloneDeep(initDate.formData));// 提交操作const handleSubmit = async () => {setIsPending(true);const finalFormData = new FormData();Object.entries(formData).forEach(([key, value]) => {finalFormData.append(key, value);});const res = await api.submitComment(finalFormData);setSubmitResult({ type: res.code === 0 ? 'success' : 'error', data: res.msg });setIsPending(false);};// 重置操作const handleReset = () => {setFormData(_.cloneDeep(initDate.formData));setSubmitResult(_.cloneDeep(initDate.submitResult));};return (<div className="w-auto"><div className={cn('flex flex-col gap-2', { 'opacity-50': isPending })}><div><label>昵称：</label><input name="uname" value={formData.uname} onChange={(e) => setFormData({ ...formData, uname: e.target.value })} className="border rounded px-2" /></div><div><label>评论：</label><input name="comment" value={formData.comment} onChange={(e) => setFormData({ ...formData, comment: e.target.value })} className="border rounded px-2" /></div><div className="flex gap-2"><button className="bg-blue-400 text-white px-2 rounded w-20 p-1" onClick={handleSubmit}>发表</button><button className="bg-red-400 text-white px-2 rounded w-20 p-1" onClick={handleReset}>重置</button></div></div><hr className="my-2" />{match(isPending).with(true, () => <span className="text-yellow-400 text-xs">提交中...</span>).otherwise(() =>match(submitResult.type).with('error', () => <span className="text-red-400 text-xs">{submitResult.data}</span>).with('success', () => <span className="text-green-400 text-xs">{submitResult.data}</span>).otherwise(() => null),)}</div>);
}