javascript - 为 React Hook Form 和 watch() 自定义 onChange

Question

我正在尝试编写一个自定义的 onChange 并watch 更改。

错误:

监视的 myValue 不会在下拉列表中注册更改。有什么想法吗？

根据API documentation , 这可以通过执行以下操作来实现:

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

您没有将 name Prop 传递给您的 select。文档说你应该默认这样做:

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

如果您记录 register('fruits') 返回的内容，您会在 onChange 之外看到一个 name prop， onBlur 和 ref。如果您将 name={fruits.name} 添加到您的 select，您将看到 watch 也在工作。

编辑:是的，目前文档中也缺少此内容。