是的，对 Select 字段（下拉列表）的验证 react-hook-form 不起作用

Question

我是 ReactJs 中的新成员，所以我正在使用 react-hook-form 和 Yup 模式验证，我需要验证我的“Select 字段”，我需要在我的“[=] 时做一些事情17=]字段”onChange。但是架构验证不起作用。例如：当点击提交按钮并且“Select 字段”的值为null/empty 时会出现错误消息，但是当select 字段值变为非空/非空值时，错误信息并没有消失，错误信息仍然存在。我的目标是当值“Select 字段”不为空时错误消息消失。有人知道怎么修这个东西吗？提前致谢，抱歉我的英语不好。下面是我的代码和 codesandbox 中的 link。 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);

Answer 1

您可以使用触发器触发手动验证，也可以设置值并触发验证

设置值并触发验证

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);

是的，对 Select 字段（下拉列表）的验证 react-hook-form 不起作用

Yup validation on Select field (dropdown) react-hook-form not working

javascript

reactjs

yup

react-hooks

react-hook-form