如何使用语义UI React和React Hook Form在模糊上进行验证

Question

我有一个非常简单的演示react应用程序。它由一个语义UI ReactForm和一个Input组成。

我正在尝试使用React Hook Form在blur上验证它。该字段只有在包含超过十个字符时才有效。

默认情况下，验证在提交时启动，但您应该能够通过向useForm传递参数，在触摸、模糊或更改事件时对表单进行验证，请参阅文档。

在我下面的例子中，验证仍然只在提交时启动。为什么会这样，我能做些什么来修复它？

//imports
const App = () => {
const { register, setValue, handleSubmit, errors } = useForm({
mode: "onBlur"
});
const handleChange = (e, { name, value }) => { setValue(name, value) };
const onSubmit = (value) => {
alert("submitted successfully");
console.log(value);
};
useEffect(() => {
register({ name: "input" }, { required: true, minLength: 10 });
});
return (
<Form className="App" onSubmit={handleSubmit(onSubmit)}>
<Input
name="input"
className="field"
placeholder="Type here"
onChange={handleChange}
error={!!errors.input}
></Input>
<Button type="submit">Submit</Button>
</Form>
);
};
ReactDOM.render(<App />, document.getElementById("root"));

如果有帮助的话，这里有一个CodeSandbox链接：https://codesandbox.io/s/react-hook-form-with-semantic-ui-react-z59p2?file=/src/index.js

Answer 1

看起来您只需要在setValue之后添加trigger来处理Change。

https://react-hook-form.com/api/useform/trigger

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { Form, Input, Button } from "semantic-ui-react";
import { useForm } from "react-hook-form";
import "semantic-ui-css/semantic.min.css";
const App = () => {
const { register, setValue, handleSubmit, errors, trigger } = useForm({
mode: "onBlur"
});
const handleChange = (e, { name, value }) => {
setValue(name, value);
trigger(name);
};
const onSubmit = (value) => {
alert("submitted successfully");
console.log(value);
};
useEffect(() => {
register({ name: "input" }, { required: true, minLength: 10 });
}, []);
return (
<Form className="App" onSubmit={handleSubmit(onSubmit)}>
<Input
name="input"
className="field"
placeholder="Type here"
onChange={handleChange}
error={!!errors.input}
></Input>
<Button type="submit">Submit</Button>
</Form>
);
};
ReactDOM.render(<App />, document.getElementById("root"));

CodeSandBox链接的分叉：https://codesandbox.io/s/react-hook-form-with-semantic-ui-react-forked-ho7ut?file=/src/index.js

---

更新您的脚本以使用onBlur而不是onchange：

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { Form, Input, Button } from "semantic-ui-react";
import { useForm } from "react-hook-form";
import "semantic-ui-css/semantic.min.css";
const App = () => {
const { register, setValue, handleSubmit, errors, trigger } = useForm({
mode: "onBlur"
});
const handleChange = (e) => {
e.persist();
setValue(e.target.name, e.target.value);
trigger(e.target.name);
};
const onSubmit = (value) => {
alert("submitted successfully");
console.log(value);
};
useEffect(() => {
register({ name: "input" }, { required: true, minLength: 10 });
}, []);
return (
<Form className="App" onSubmit={handleSubmit(onSubmit)}>
<Input
name="input"
className="field"
placeholder="Type here"
onBlur={handleChange}
error={!!errors.input}
></Input>
<Button type="submit">Submit</Button>
</Form>
);
};
ReactDOM.render(<App />, document.getElementById("root"));

https://codesandbox.io/s/react-hook-form-with-semantic-ui-react-forked-ho7ut?file=/src/index.js