为 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

使用 useState 挂钩它可以正常工作 link 所以：

e.target.value 是下拉菜单的选定值。要动态更改您的标题，您必须使用钩子在状态更改时为您的组件小夜曲。

见下文：

import React from 'react';
import { useForm } from "react-hook-form";
import "./styles.css";

export default function App() {
  const { register, watch } = useForm();
  // const myValue = watch("fruits", "default");
  const [myVal, setMyVal] = React.useState('Default')

  const fruits = register("fruits");


  return (
    <div className="App">
      <h1>{myVal}</h1>
      <select
        onChange={(e) => {
          fruits.onChange(e);
          setMyVal(e.target.value); // 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>
  );
}

Answer 2

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

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

如果你记录 register('fruits') return 你会看到除了 onChange、onBlur 和 ref 之外还有一个 name 道具.如果您将 name={fruits.name} 添加到 select，您会看到 watch 也在工作。

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

Answer 3

您忘记将 register() 道具传递给组件。通过在 select 上传递 {...fruits}，它正在工作。

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
        }}
        {...register('fruits')}
        onBlur={fruits.onBlur}
        ref={fruits.ref}
      >
        <option value="1Banana">Banana</option>
        <option value="1Kiwi">Kiwi</option>
        <option value="1Mango">Mango</option>
      </select>
    </div>
  );
}

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

Custom onChange for React Hook Form and watch()

javascript

forms

reactjs

react-hook-form