React Hook Form 和 watch() 的自定义 onChange

Question

我正在尝试写一个习惯onChange和watch变化。

错误：

观看者myValue不会注册下拉列表中的更改。有什么想法吗？

根据API 文档，可以通过执行以下操作来实现：

export default function App() {
  const { register, watch } = useForm();

  const fruits = register("fruits");

  const myValue = watch("fruits", "default");

  return (
    <div className="App">
      <h1>{myValue}</h1>
      <select
        onChange={(e) => {
          fruits.onChange(e); // react hook form onChange
          console.log("Here would go the my onChange"); // my onChange
        }}
        onBlur={fruits.onBlur}
        ref={fruits.ref}
      >
        <option value="1Banana">Banana</option>
        <option value="1Kiwi">Kiwi</option>
        <option value="1Mango">Mango</option>
      </select>
    </div>
  );
}

您可以在这里找到上面的示例：

https://codesandbox.io/s/divine-rgb-mwiqn?file=/src/App.js

Answer 1

您没有将nameprop 传递给您的select. 文档说你应该默认这样做：

<select {...register('fruits')}>

如果您记录 return 的内容，除了,和之外，您还会在其中register('fruits')看到一个prop 。如果你添加到你的，你也会看到工作。nameonChangeonBlurrefname={fruits.name}selectwatch

编辑：是的，目前文档中也缺少这一点。