推荐使用 "react-hook-form": "^6.3.0",这个版本的form,个人感觉比较好用一点
1、创建表单
const { handleSubmit, errors, control, setValue } = useForm({
mode: "all",
reValidateMode: "onChange",
});
2、使用
<form onSubmit={handleSubmit(onSubmit)} className="form">
<Controller
key={defaultFormValue?.name}
name="name"
defaultValue={defaultFormValue?.name || ""}
control={control}
rules={{
required: true,
}}
render={({ value, onChange }) => (
<input
onChange={(e) => onChange(e.target.value)}
onBlur={(e) => {
onChange(value);
}}
value={value}
className={errors.name ? "form-input-error" : "form-input"}
maxLength={5}
name="name"
placeholder="请输入姓名"
/>
)}
/>
</form>