前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载React Suitersuite的表单组件可以与 React Hook Form 为主体结合仓库源码完整演示如何在 rsuite 的Form中使用useForm与Controller接管表单状态并进阶覆盖内置校验规则、Yup Schema 校验以及DatePicker、Rate等其它数据输入组件帮助你写出可复制、可运行的受控表单。核心用法Controller 桥接 rsuite 组件React Hook Form 是一个简单、灵活且强大的表单验证库。rsuite 的表单组件Input、SelectPicker、DatePicker、Rate等并不直接暴露 React Hook Form 的register接口因此官方推荐的接入方式是使用 React Hook Form 的Controller组件将field对象中的value与onChange手动桥接到 rsuite 组件的受控属性上。usage.md 中的最小可运行示例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 namename control{control} render{({ field }) ( Input id{field.name} value{field.value} onChange{value field.onChange(value)} placeholderName / )} / Button appearanceprimary typesubmit Submit /Button /Form ); };关键点拆解useForm({ defaultValues })负责初始化表单值control是后续Controller共享的状态容器handleSubmit会在表单通过验证后调用onSubmit。Controller的render回调会收到{ field, fieldState }其中field.value对应 React Hook Form 内部的状态值field.onChange(value)用于把 rsuite 组件的onChange结果写回表单状态。rsuite 的Input的onChange参数本身就是新值而非事件对象因此可以直接写成onChange{value field.onChange(value)}无需像原生input那样做e.target.value转换。Form onSubmit{handleSubmit(onSubmit)}中handleSubmit返回的正是 React Hook Form 的标准提交处理函数React Hook Form 会在校验通过后才执行onSubmit未通过时则阻止提交。文档页面入口 docs/pages/components/form-react-hook-form/index.tsx 中标注了官方示例所依赖的版本react-hook-form^7.50.1、yup^1.3.3可直接参照该版本组合使用。基础实例多字段 Form.Group 布局在实际表单中通常不止一个字段。basic.md 给出了同时包含name与email两个字段的完整示例并引入了 rsuite 的Form.Stack、Form.Group进行布局import { useForm, Controller } from react-hook-form; import { Input, Button, Form } from rsuite; const App () { const defaultValues { name: , email: }; const { control, handleSubmit } useForm({ defaultValues }); const onSubmit data alert(JSON.stringify(data, null, 2)); return ( Form onSubmit{handleSubmit(onSubmit)} Form.Stack fluid Controller namename control{control} render{({ field, fieldState }) ( Form.Group Input id{field.name} value{field.value} onChange{value field.onChange(value)} placeholderName / /Form.Group )} / Controller nameemail control{control} render{({ field, fieldState }) ( Form.Group Input id{field.name} value{field.value} onChange{value field.onChange(value)} placeholderEmail / /Form.Group )} / Button appearanceprimary typesubmit Submit /Button /Form.Stack /Form ); };此处用Form.Stack fluid让输入框撑满容器宽度并纵向堆叠Form.Group提供字段组语义。注意render回调同时解构了fieldState——它携带该字段的校验状态与错误信息在下面的验证示例中会与formState.errors配合使用。从源码看Form.Stack、Form.Group、Form.ErrorMessage等均为Form的静态子组件见 src/Form/Form.tsx。内置规则验证required 与 patternReact Hook Form 支持在Controller上通过rules声明字段级验证规则。validation.md 演示了required与pattern规则并封装了一个可复用的Field组件来统一渲染输入控件与错误提示import { useForm, Controller } from react-hook-form; import { Input, Button, Form } from rsuite; const Field ({ as: Component Input, field, error, ...rest }) { return ( Form.Group Component id{field.name} value{field.value} onChange{value field.onChange(value)} {...rest} / Form.ErrorMessage show{!!error} placementbottomStart {error} /Form.ErrorMessage /Form.Group ); }; const App () { const defaultValues { name: , email: }; const { control, handleSubmit, formState: { errors } } useForm({ defaultValues }); const onSubmit data alert(JSON.stringify(data, null, 2)); return ( Form onSubmit{handleSubmit(onSubmit)} Form.Stack fluid Controller namename control{control} rules{{ required: Name is required }} render{({ field, fieldState }) ( Field field{field} error{errors[field.name]?.message} placeholderName / )} / Controller nameemail control{control} rules{{ required: Email is required, pattern: { value: /\S\S\.\S/, message: Invalid email } }} render{({ field, fieldState }) ( Field field{field} error{errors[field.name]?.message} placeholderEmail / )} / Button appearanceprimary typesubmit Submit /Button /Form.Stack /Form ); };要点rules{{ required: Name is required }}中required的值即为未填写时的错误消息文案。pattern需要同时给出value正则与message不匹配时的提示这里用/\S\S\.\S/做基础邮箱格式校验。通过formState.errors读取各字段错误errors[field.name]?.message取出消息文本传给Form.ErrorMessage。rsuite 的Form.ErrorMessage支持show控制显隐与placement控制弹出位置如bottomStart配合!!error即可做到有错才显示。使用 Yup 进行 Schema 校验当字段较多或校验逻辑复杂时可以借助 React Hook Form 官方提供的验证解析器validation resolver。官方文档说明resolver 可与主流的验证库集成包括Yup、Zod、AJV、Joi、Superstruct、Vest、class-validator、io-ts、typanion、Ajv、TypeBox、Valibot 和 nope。yup-schema-validation.md 给出了 Yup 的完整示例import { useForm, Controller } from react-hook-form; import { Input, Button, Form } from rsuite; import { yupResolver } from hookform/resolvers/yup; import * as yup from yup; const Field ({ as: Component Input, field, error, ...rest }) { return ( Form.Group Component id{field.name} value{field.value} onChange{value field.onChange(value)} {...rest} / Form.ErrorMessage show{!!error} placementbottomStart {error} /Form.ErrorMessage /Form.Group ); }; const validationSchema Yup.object().shape({ name: Yup.string().required(Required), email: Yup.string().email(Invalid email address).required(Required) }); const App () { const defaultValues { name: , email: }; const { control, handleSubmit, formState: { errors } } useForm({ defaultValues, resolver: yupResolver(validationSchema) }); const onSubmit data alert(JSON.stringify(data, null, 2)); return ( Form onSubmit{handleSubmit(onSubmit)} Form.Stack fluid Controller namename control{control} render{({ field, fieldState }) ( Field field{field} error{errors[field.name]?.message} placeholderName / )} / Controller nameemail control{control} render{({ field, fieldState }) ( Field field{field} error{errors[field.name]?.message} placeholderEmail / )} / Button appearanceprimary typesubmit Submit /Button /Form.Stack /Form ); };与内置rules的区别在于验证规则集中定义在独立的validationSchema中通过useForm({ resolver: yupResolver(validationSchema) })注入字段自身无需再声明ruleserrors的生成与聚合完全交给 resolver。Schema 中的.required(Required)、.email(Invalid email address)即成为最终展示给用户的错误消息。值得一提的是一致性rsuite 自身的Form组件同样提供了resolverprop用于接入 Yup、Zod、AJV、Joi、Valibot 等第三方校验库其类型定义ResolverV, E约定接收当前表单值返回{ errors }键为字段名、值为错误消息空的errors对象表示表单通过校验见 src/Form/resolvers.ts。在 rsuite 的Form源码中一旦提供了resolver提交时总是走异步校验路径checkAsync()校验无错误后才触发onSubmit见 src/Form/Form.tsx。这一设计印证了 React Hook Form 集成文档中的校验通过后才提交行为。其他数据输入组件DatePicker 与 RateReact Suite 中所有数据输入组件都可以与 React Hook Form 一起使用。other-input-components.md 演示了DatePicker与Rate的接入方式同时展示了复用Field组件并通过as属性切换输入控件import { useForm, Controller } from react-hook-form; import { DatePicker, Rate, Button, Form } from rsuite; import { yupResolver } from hookform/resolvers/yup; import * as yup from yup; const Field ({ as: Component, field, error, ...rest }) { return ( Form.Group Component id{field.name} value{field.value} onChange{value field.onChange(value)} {...rest} / Form.ErrorMessage show{!!error} placementbottomStart {error} /Form.ErrorMessage /Form.Group ); }; const validationSchema Yup.object().shape({ date: Yup.date().required(Date is required), rating: Yup.number() .required(Rating is required) .min(2, Rating must be at least 2) .max(5, Rating must be at most 5) }); const App () { const defaultValues { date: new Date(), rating: 2 }; const { control, handleSubmit, formState: { errors } } useForm({ defaultValues, resolver: yupResolver(validationSchema) }); const onSubmit data alert(JSON.stringify(data, null, 2)); return ( Form onSubmit{handleSubmit(onSubmit)} Form.Stack fluid Controller namedate control{control} render{({ field, fieldState }) ( Field as{DatePicker} field{field} error{errors[field.name]?.message} / )} / Controller namerating control{control} render{({ field, fieldState }) ( Field as{Rate} field{field} error{errors[field.name]?.message} coloryellow / )} / Button appearanceprimary typesubmit Submit /Button /Form.Stack /Form ); };该示例的要点Field组件通过as属性接收不同组件配合{...rest}透传其余 props如Rate的coloryellow让同一套控件 错误提示结构复用于多种组件。DatePicker与Rate的onChange同样直接给出新值日期对象、评分数字与 React Hook Form 的field.onChange无缝对接。Yup Schema 针对不同数据类型使用不同校验器Yup.date()校验日期是否必填Yup.number().min(2).max(5)约束评分范围错误消息均可在校验器中自定义。默认值中date: new Date()、rating: 2与 Schema 的边界min(2)、max(5)保持一致保证初始状态即通过校验。安装与依赖要在你的项目中复现上述示例需要安装 rsuite 之外的两个依赖npm install react-hook-form yup hookform/resolvers示例依赖版本可参考 docs/pages/components/form-react-hook-form/index.tsxreact-hook-form^7.50.1、yup^1.3.3hookform/resolvers提供yupResolver等适配器。若只使用内置rules验证无需 Yup则只需安装react-hook-form一个依赖。小结回顾官方文档 form-react-hook-form 提供的四条接入路径场景核心配置适用情况基础用法useForm({ defaultValues })Controller简单的受控字段接入内置验证Controller的rulesrequired/pattern等少量字段的轻量校验Yup Schema 验证useForm({ resolver: yupResolver(schema) })校验规则集中管理、复杂度高其他输入组件Field as{Component}复用封装DatePicker、Rate等任意数据输入组件接入 rsuite 时始终遵循同一个模式用Controller包住 rsuite 输入组件将field.value映射到组件的value将组件的onChange返回值回传给field.onChange再通过formState.errors驱动Form.ErrorMessage展示错误——这也是官方 usage.md 所定义的集成范式。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐React Suite 与 React Hook Form 集成实战表单状态管理与校验完全指南React Suite 与 React Hook Form 集成实战表单状态管理与校验完全指南 React Suite 的表单相关组件 Form 、 Inp前端UI组件React Hook Form V6 实战指南基于 Hook 的表单状态管理与校验React Hook Form V6 实战指南基于 Hook 的表单状态管理与校验 导读 本指南围绕本仓库 docs/README.V6.md https:/前端React Suite 与 React Hook Form 集成指南从基础表单到 Yup 校验的完整实战React Suite 与 React Hook Form 集成指南从基础表单到 Yup 校验的完整实战 React Suitersuite的表单组件与前端UI组件上一篇OnmyojiAutoScript终极指南阴阳师自动化脚本快速上手完整教程下一篇猫抓浏览器资源嗅探神器轻松捕获网页视频音频资源创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
