Почему не работает onChange с react-hook-forms?

Не работающий onChange вместе с React Hook Form может иметь несколько причин. Вот некоторые из них и примеры решений:

1. Неправильное использование контролируемого компонента: Если вы используете контролируемый компонент, значение его должно быть связано с состоянием компонента-родителя, с помощью useState или другого хука активации. Пример:

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

function App() {
  const { register, handleSubmit } = useForm();
  const [inputValue, setInputValue] = useState("");

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        name="example"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        ref={register}
      />
      <input type="submit" />
    </form>
  );
}

export default App;

2. Неправильное использование ref: React Hook Form использует свой собственный регистратор (register) для регистрации инпутов. Если вы используете ref, то регистрация должна быть внедрена в реф. Пример:

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

function App() {
  const { register, handleSubmit } = useForm();
  const inputRef = useRef();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="example" ref={(e) => {
        register(e);
        inputRef.current = e;
      }} />
      <button type="button" onClick={() => { inputRef.current.value = "New value"; }}>Set value</button>
      <input type="submit" />
    </form>
  );
}

export default App;

3. Неправильное использование register: Вы должны зарегистрировать инпуты с помощью register перед использованием onChange. Пример:

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

function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="example" ref={register} onChange={(e) => console.log(e.target.value)} />
      <input type="submit" />
    </form>
  );
}

export default App;

4. Неправильное использование типа инпута: Некоторые типы инпутов не будут вызывать onChange, например, input типа "file" или "checkbox". Пример:

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

function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="file" name="example" ref={register} onChange={(e) => console.log(e.target.value)} />
      <input type="submit" />
    </form>
  );
}

export default App;

В конечном итоге, не работающий onChange совместно с React Hook Form может быть вызван различными проблемами, от неправильного использования компонентов до неправильных связей с состоянием. Но соответствующая диагностика и проверка могут помочь вам исправить эту проблему.