React Hook Form 是一个用于 React 的表单管理库,它通过使用 React Hooks 来简化表单的状态管理和验证。dynamic required
指的是根据某些条件动态地设置表单字段的必填性。
React Hook Form 主要有以下几种类型:
适用于需要复杂表单验证和管理的场景,例如:
假设我们有一个表单,其中某个字段的必填性取决于另一个字段的值。我们可以使用 useForm
和 Controller
来实现这一点。
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
const DynamicRequiredForm = () => {
const { control, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="toggle"
control={control}
defaultValue=""
render={({ field }) => (
<input type="checkbox" {...field} />
)}
/>
<Controller
name="inputField"
control={control}
rules={{
required: ({ getValues }) => getValues().toggle === 'on' ? 'Required' : false,
}}
render={({ field }) => (
<input type="text" {...field} />
)}
/>
{errors.inputField && <p>{errors.inputField.message}</p>}
<button type="submit">Submit</button>
</form>
);
};
export default DynamicRequiredForm;
rules
中正确设置了动态条件。getValues
函数正确获取了依赖项的值。Controller
组件正确渲染并传递了 field
属性。通过以上步骤,可以确保动态必填性在 React Hook Form 中正确生效。
领取专属 10元无门槛券
手把手带您无忧上云