React Hook Form 集成 🧩

React Suite 的表单组件可以与 React Hook Form 一起使用。React Hook Form 是一个简单、灵活且强大的表单验证库，它可以帮助你轻松地管理表单状态和验证。

使用 

import { useForm, Controller } from 'react-hook-form';
import { Input, Button, Form } from 'rsuite';

const App = () => {
  const defaultValues = { name: '' };
  const { control, handleSubmit } = useForm({ defaultValues });
  const onSubmit = data => alert(JSON.stringify(data, null, 2));

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="name"
        control={control}
        render={({ field }) => (
          <Input
            id={field.name}
            value={field.value}
            onChange={value => field.onChange(value)}
            placeholder="Name"
          />
        )}
      />

      <Button appearance="primary" type="submit">
        Submit
      </Button>
    </Form>
  );
};

演示

基础实例

验证

使用 Yup 验证

react-hook-form 提供一个验证解析器，可以和主流的验证库集成，包括: Yup, Zod, AJV, Joi, Superstruct, Vest, class-validator, io-ts, typanion, Ajv, TypeBox, Valibot and nope.

以下是使用 Yup 验证的示例：

其他数据输入组件

React Suite 中所有的数据输入组件都可以与 React Hook Form 一起使用。以下示例将演示如何使用 React Hook Form 与 DatePicker 和 Rate 组件。

Vercel banner