Как реализовать хук useInput с ссылками

Question

Я хочу создать универсальный c useInput хук, который идет с ссылкой на входной DOM. Я бы использовал ссылку из useInput внутри Form компонента, чтобы получить все входные значения при отправке формы.

У меня возникают проблемы с пониманием того, как реализовать useRef для получения значения всякий раз, когда значение входного DOM изменяется. Пока все, что он делает, это продолжает регистрировать undefined для ссылки ...

Что я пытался:

  const useInput = ({ label, name }, ref) => {
    const [value, setValue] = useState('');
    const inputRef = useRef();

    useEffect(() => {
      const { current } = inputRef;
      console.log(current); // logs undefined - shouldn't it refer to the input dom?
    }, [value])

    const input = (
      <Form label={label}>
        <input name={name} onChange={e => setValue(e.target.value)} ref={inputRef}/>
      </Form>
    )

    return [value, input];
  };

  export default useInput;

Answer 1

Я получил его на работу - я забыл обновить inputRef.current внутри useEffect при изменении состояния значения - хотя и не уверен, что это лучший метод ...

  const useInput = ({ label, name }, ref) => {
    const [value, setValue] = useState('');
    const inputRef = useRef();

    useEffect(() => {
      inputRef.current = value // *added this line, so it updates the ref as state changes.
    }, [value])

    const input = (
      <Form label={label}>
        <input name={name} onChange={e => setValue(e.target.value)} ref={inputRef}/>
      </Form>
    )

    return [value, input, inputRef]; // also added inputRef as an output so I can consume it
  };

  export default useInput;