React Hook表单上的使用规则

Question

概述

我使用React Hook Form来管理输入字段的验证。我正在利用react引导程序，所以我必须使用此库提供的Controller组件。

文档中不清楚如何使用规则；只是它和register一样。我能够让一个验证规则工作(必需)。对于下拉列表，我总是至少选择一个值("select")，所以required不起作用，相反，我试图使用regex来查看选择是否是这个值。

我已经尝试了很多方法来完成这项工作，但不幸的是我想不通。

问题

有人在使用React Hook Form与受控组件，特别是下拉菜单和正则表达式方面有经验吗？我正在寻找他们如何在控制器组件的规则中的寄存器中定义的语法。只需要看起来工作

以下是有效的方法(注意规则道具)

<TextInputField
label="Operation Info"
name="operation_info"
control={control}
rules={{ required: "Operation is required" }}
error={errors?.name}
/>

这不起作用(注意规则道具)

我正在另一个自定义组件上尝试这个，除了下拉列表。

<Dropdown
label="Ratings"
name="ratings"
control={control}
rules={{ pattern: /^(?!select$).*/ }}
options={ratings}
optionsKey={"rating"}
error={errors?.indicator}
/>

我尝试了复制粘贴他们的实际模式规则，但这也不起作用。我能够勾入表单中的所有错误，但任何使用模式的错误都不会被注册为错误。

第二个不起作用。我将这些道具分布在另一个文件中的实际react引导程序组件上。它们都是一样的，所以文本输入是有效的，这意味着下拉列表应该也有效，但它不起作用。唯一不同的是，我认为这是我正在应用的规则；我一定做错了，但没有文件。

以下是下拉组件的示例：

import React from "react";
import { Form } from "react-bootstrap";
import { Controller } from "react-hook-form";
export const Dropdown = (props) => {
const { error, name, control, label, rules, options, optionsKey } = props;
return (
<Form.Group>
<Form.Label>{label}</Form.Label>
<Controller
name={name}
control={control}
rules={rules}
render={({ field }) => (
<Form.Control
{...field}
as="select"
className={error ? `is-invalid` : null}
>
<option selected disabled className="text-muted" value="select">
select
</option>
{options?.length > 0
? options.map((option, index) => {
return (
<option value={option[optionsKey]} key={index}>
{option[optionsKey]}
</option>
);
})
: null}
</Form.Control>
)}
/>
<Form.Control.Feedback type="invalid">
{error?.message}
</Form.Control.Feedback>
</Form.Group>
);
};
export default Dropdown;

这是控制器文档的链接https://react-hook-form.com/api/usecontroller/controller

Answer 1

我做了一个最小化的测试设置，如果我理解你的问题，那么问题似乎只是你的正则表达式。尝试

rules={{ required: "req", pattern: /^(?!select)/ }}

点击此处查看测试沙箱和i如果沙箱消失：

import * as React from "react"
import { useForm, Controller } from "react-hook-form"
const Dropdown = ({ name, control, rules, options }) => {
return (
<Controller
name={name}
control={control}
rules={rules}
render={({ field }) => (
<select {...field} rules={rules}>
<option value="select">select</option>
<option value=""></option>
{options.map(x => <option key={x} value={x}>{x}</option>)}
</select>
)}
/>
)
}
export default function App() {
const { handleSubmit, control, formState: {errors} } = useForm()
const onSubmit = (data) => console.log("Submit:", data)
console.log("Errors:", errors?.ratings)
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Dropdown
name="ratings"
control={control}
rules={{ required: "Requir", pattern: /^(?!select)/ }}
options={["potato", "tomato", "select", "greg"]}
/>
<input type="submit" />
{errors && errors.ratings && <p>
Error: {errors.ratings.type} {errors.ratings.message}</p>
}
</form>
)
}