[解決済み] Reactフックで入力を処理する

質問

フックを使ってテキスト入力を処理する方法がいくつかあるようです。フックで入力を処理する方法として、より好ましい、あるいは適切な方法は何でしょうか？あなたならどれを使いますか？

1) 最もシンプルなフックですが、フィールドが多くなればなるほど、繰り返し書かなければならないコードも多くなります。

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

のイベントがあります。

onChange={event => setPassword(event.target.value)}
onChange={event => setUsername(event.target.value)}

2) 上記の例と似ていますが、動的なキー名を使用します。

const [inputValues, setInputValues] = useState({
  username: '', password: ''
});

const handleOnChange = event => {
  const { name, value } = event.target;
  setInputValues({ ...inputValues, [name]: value });
};

のイベントです。

onChange={handleOnChange}

3)代替案として useState の代わりになるもので、ReactJSのドキュメントにも書かれているように useReducer は通常 useState .

const [inputValues, setInputValues] = useReducer(
  (state, newState) => ({ ...state, ...newState }),
  {username: '', password: ''}
);

const handleOnChange = event => {
  const { name, value } = event.target;
  setInputValues({ [name]: value });
};

のイベントです。

onChange={handleOnChange}

4) useCallback は、依存関係の1つが変更された場合にのみ変更されるコールバックのメモ化されたバージョンを返します。

const [inputValues, setInputValues] = useState({ 
  username: '', password: '' 
});

const handleOnChange = useCallback(event => {
  const { name, value } = event.target;
  setInputValues({ ...inputValues, [name]: value });
});

のイベントです。

onChange={handleOnChange}

どのように解決するのですか？

入力値を返す再利用可能な関数を書くのはどうでしょう ... そして <input> そのものを返す再利用可能な関数を書いてみてはどうでしょうか。

 function useInput({ type /*...*/ }) {
   const [value, setValue] = useState("");
   const input = <input value={value} onChange={e => setValue(e.target.value)} type={type} />;
   return [value, input];
 }

という風に使うことができます。

 const [username, userInput] = useInput({ type: "text" });
 const [password, passwordInput] = useInput({ type: "text" });

 return <>
   {userInput} -> {username} <br />
   {passwordInput} -> {password}
 </>;