フックを使用してユーザーのテキスト入力を処理する方法がいくつかあることがわかりました。フックを使用して入力を処理するためのより好ましい、または適切な方法は何ですか? どれを使用しますか?
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}
ベストアンサー1
入力値とそれ自身を返す再利用可能な関数を書いてみてはどうでしょうか<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}
</>;