Как сделать функции, которые изменяют состояние через хук useState, многоразовыми?

Question

Допустим, у меня есть следующий код для изменения входных значений, и он обновляет состояние компонента:

const handleInputChange = e => {
    let value = e.target.value;
    let name = e.target.name;
    let type = e.target.type;

    // some other code

    setInput(nextState);
  };

Однако, поскольку у меня есть разные компоненты, использующие эту же функцию, я бы хотелсделать его экспортируемой функцией полезности. Но затем он вызывает функцию setInput из хука useState.

Должен ли я просто передавать setInput в качестве параметра для каждого handleInputChange() вызова, например:

onChange={e => handleInputChange(e, setInput)}

Или есть лучший способ справиться с этим?

Answer 1

Если вы создаете пользовательский хук, вы можете просто вызвать другие хуки там. Таким образом, вы можете просто получить setInput внутри хука вместо того, чтобы передавать его туда:

const useCustomHook = (initialValue) => {

  const [input, setInput] = useState(initialValue);

  // ...

  const handleInputChange = e => {
    let value = e.target.value;
    let name = e.target.name;
    let type = e.target.type;

    // some other code

    setInput(nextState);
  };

  return handleInputChange;
}

Этот input будет привязан к состоянию компонента, который вызывает useCustomHook.

РЕДАКТИРОВАТЬ:

Комбинируя ответ @ Shota с этим, вы можете создать компонент, используя ловушку useState для внутренней обработки состояния, а также:

const CustomInput(initialState) => {

  const [input, setInput] = useState(initialValue);

  const handleInputChange = e => {
    // ...
    setInput(nextState);
  };

  return (<input type="text" onChange={handleInputChange} />);
} 

Для использования input во внешнем мире просто вернуть его с крючка:

useCustomHook = () => {
  // ...
  return {
    handleInputChange,
    input
  }
}

Answer 2

Вы можете создать новый многократно используемый компонент с помощью функции on change.

import React from 'react';

const CommonInput = ({handleChange}) => {

  const handleInputChange = e => {
    let value = e.target.value;
    let name = e.target.name;
    let type = e.target.type;

    // some other code

    setInput(nextState);
    handleChange(nextState);
  };

  return (<input type="text" onChange={handleInputChange} />);
}

export default CommonInput;

И мы можем использовать его везде, где захотим:

import React from 'react';

const Parent = (props) => (
  <CommonInput handleChange={nextStateData => {}}/>
  );

export default Parent;

Как правило, я бы предпочелсоздание нового компонента с некоторой функциональностью внутри, чем повторное использование только функций.