Reactjs 如何使用语义UI React和React钩子表单在blur上进行验证？

我有一个非常简单的演示react应用程序。它包含一个语义UI React

表单

，只有一个

输入

我正在尝试使用在blur上验证它。该字段仅在包含10个以上字符时有效

默认情况下，在提交时启动验证，但您应该能够通过将参数传递到

useForm

，在触摸、模糊或更改事件时验证表单，请参阅

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

//导入
常量应用=（）=>{
常量{register，setValue，handleSubmit，errors}=useForm({
模式：“onBlur”
});
常量handleChange=（e，{name，value}）=>{setValue（name，value）}；
const onSubmit=（值）=>{
警报（“提交成功”）；
console.log（值）；
};
useffect（（）=>{
寄存器（{name:“input”}，{required:true，minLength:10}）；
});
返回(
提交
);
};
render（
看起来您只需要将
触发器
添加到setValue之后的handleChange


import React，{useffect}来自“React”；
从“react dom”导入react dom；
从“语义ui反应”导入{Form，Input，Button}；
从“react hook form”导入{useForm}；
导入“语义ui css/semantic.min.css”；
常量应用=（）=>{
const{register，setValue，handleSubmit，errors，trigger}=useForm({
模式：“onBlur”
});
常量handleChange=（e，{name，value}）=>{
设置值（名称、值）；
触发器（名称）；
};
const onSubmit=（值）=>{
警报（“提交成功”）；
console.log（值）；
};
useffect（（）=>{
寄存器（{name:“input”}，{required:true，minLength:10}）；
}, []);
返回(
提交
);
};
ReactDOM.render(


已将脚本更新为使用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"));

import React，{useffect}来自“React”；
从“react dom”导入react dom；
从“语义ui反应”导入{Form，Input，Button}；
从“react hook form”导入{useForm}；
导入“语义ui css/semantic.min.css”；
常量应用=（）=>{
const{register，setValue，handleSubmit，errors，trigger}=useForm({
模式：“onBlur”
});
常数handleChange=（e）=>{
e、 坚持（）；
setValue（e.target.name，e.target.value）；
触发器（如target.name）；
};
const onSubmit=（值）=>{
警报（“提交成功”）；
console.log（值）；
};
useffect（（）=>{
寄存器（{name:“input”}，{required:true，minLength:10}）；
}, []);
返回(
提交
);
};
ReactDOM.render（
使其在每次按键时进行验证，而不是在模糊时进行验证。您可能可以使用onBlur而不是onChange来修复此问题。@hat还将答案更新为reference onBlur。
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"));