javascript - 是的,选择字段(下拉菜单)react-hook-form 上的验证不起作用
问题描述
我是 ReactJs 的新手,所以我正在使用 react-hook-form 和 Yup 模式验证,我需要验证我的“选择字段”,当我的“选择字段”onChange 时我需要做一些事情。但是模式验证不起作用。For example: when the submit button cliked and the value on "Select field" is null/empty the error message is appear, but when the select field value change to not null/ not empty value, the error message is not disapear, and error消息仍然退出。我的目标是当“选择字段”值不为空时,错误消息就会消失。有人知道怎么修这个东西吗?在此先感谢并为我的英语不好感到抱歉。下面是我的代码和codesandbox中的链接。 代码沙盒
import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import "./styles.css";
const SignupSchema = yup.object().shape({
select: yup.string().required()
});
function App() {
const {
register,
handleSubmit,
formState: { errors }
} = useForm({
mode: "onChange",
resolver: yupResolver(SignupSchema)
});
const onSubmit = (data) => {
alert(JSON.stringify(data));
};
const doSomething = (value) => {
// do something with my select value onChange
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Select</label>
<select
{...register("select")}
onChange={(e) => doSomething(e.target.value)}
>
<option value="">Null</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
{errors.select && <p>{errors.select.message}</p>}
</div>
<input type="submit" />
</form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
解决方案
您可以使用触发器触发手动验证,也可以设置值和触发器验证
设置值和触发验证
import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import "./styles.css";
const SignupSchema = yup.object().shape({
select: yup.string().required()
});
function App() {
const {
register,
setValue,
handleSubmit,
formState: { errors }
} = useForm({
mode: "onChange",
resolver: yupResolver(SignupSchema)
});
const onSubmit = (data) => {
alert(JSON.stringify(data));
};
const doSomething = async (value) => {
// do something with my select value onChange
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Select</label>
<select
{...register("select")}
onChange={(e) => setValue('select', e.target.value, { shouldValidate: true })} // Using setValue
>
<option value="">Null</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
{errors.select && <p>{errors.select.message}</p>}
</div>
<input type="submit" />
</form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
手动验证
import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import "./styles.css";
const SignupSchema = yup.object().shape({
select: yup.string().required()
});
function App() {
const {
register,
trigger,
handleSubmit,
formState: { errors }
} = useForm({
mode: "onChange",
resolver: yupResolver(SignupSchema)
});
const onSubmit = (data) => {
alert(JSON.stringify(data));
};
const doSomething = async (value) => {
// do something with my select value onChange
await trigger(['select']) // Trigger validation on select
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Select</label>
<select
{...register("select")}
onChange={(e) => doSomething(e.target.value)}
>
<option value="">Null</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
{errors.select && <p>{errors.select.message}</p>}
</div>
<input type="submit" />
</form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
推荐阅读
- html - 一个项目中有多个 Servlet?
- android - 无法打开请求的套接字:地址已在使用中:bind-Android Studio
- android - Android AppBarLayout TabLayout
- css - 一个 html 文档中的多个页面
- java - Java在反序列化时如何处理泛型类的对象?
- python-3.x - 我想使用 Python 的 Steepest Descent 找到 x 解决方案。但是当我运行它时,它说 def 语法无效。我应该解决什么问题?
- react-native - react-native-firebase 调度后台通知
- arrays - Ionic & Angular:使用 ngFor 插入函数名称
- javascript - 如何从动态下拉javascript(对象)中获取值
- azure-sqldw - 资源类 - Azure SQL DW