React Hook Form：验证失败阻止调用 onChange

如何解决React Hook Form：验证失败阻止调用 onChange

我正在尝试创建一个输入，在用户抓取网站以获取数据后填充数据：在这种情况下，是第 3 方购物网站的商品价格。然后用户可以编辑输入。

为此，我将输入设为受控输入。但是现在当验证失败时，不会调用 onChange。 onChange 是我打电话给 setPrice 的地方。因此，由于未调用 onChange，因此无法使用用户输入的内容更新输入。

---

重新创建的步骤：

1. 进入演示：CodeSandbox
2. 点击抓取网站以获取商品价格
3. 点击提交
4. 验证将失败，现在尝试在输入 19.99. 的末尾添加任何字符。例如 19.99.1。

验证将再次失败并且不会调用 onChange 处理程序。您仍会看到 19.99。。

---

即使验证失败，是否仍应调用 onChange 处理程序以便用户可以看到他们正在输入的内容？

解决此问题的一种方法是在验证失败时调用 setPrice。但这似乎是一个不稳定的解决方案。这是正确的解决方案还是有更好的方法来解决这个问题？

import React,{ useState } from "react";
import { useForm } from "react-hook-form";

const isValidPrice = (value) => {
  return (
    /^(0|[1-9][0-9]{0,2}(?:(.[0-9]{3})*|[0-9]*))(\,[0-9]+){0,1}$/.test(value) ||
    /^(0|[1-9][0-9]{0,2}(?:(,[0-9]{3})*|[0-9]*))(\.[0-9]+){0,1}$/.test(value)
  );
};

export default function App(props) {
  const [price,setPrice] = useState("");

  const { register,handleSubmit,errors } = useForm();

  const onSubmit = (data) => {
    console.log("submitted ",data);
  };
  const handleChange = (e) => {
    console.log("onchanged from ",price,e.target.value);
    setPrice(e.target.value);
    return true;
  };
  return (
    <>
      <button onClick={() => setPrice("19.99.")}>
        <span style={{ fontSize: ".7em" }}>(pretend to)</span> Scrape site for
        item price
      </button>
      <form autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
        <p>Price 1</p>
        <input
          ref={register({
            validate: (value) => {
              console.log(
                "validation change from ",value,isValidPrice(value)
              );
              const valid = isValidPrice(value);

              // setPrice(value); //because onChange will not run
              return valid || `${value} is not a valid price.`;
            },})}
          name="price"
          id="price"
          value={price || ""}
          onChange={handleChange}
        />
        <br></br>
        Validation Errors: {errors.price?.message}
        <br></br>
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

解决方法

您可以在获取数据后使用 setValue 设置字段值。这样您就根本不需要 useState，因为 RHF 将处理对表单状态的更改。