ReactのInput × UseStateで便利な機能を実現

#Input×UseState

const [text, setText] = useState();

const onChangeText = (e) => {
  setText(e.target.value);
}

const onClickButton = () => {
  setText("");
}

return (
  <input placeholder="Textを入力" value={text} onChange={onChangeText}/><br />
  <button　onClick={onClickButton}>クリア</button>
);

上記のように、コンポーネントの中で、ステート変数を一つ宣言します。
そして、returnの中でinputタグを使って入力フォームを作ります。
inputの入力欄に文字を入力すると、onChangeに渡したonChangeText関数が実行され、入力した文字がステート変数にセットされるという処理になっています。

また、buttonタグでクリアボタンを作成したとします。
ボタンを押すと、onClickに渡したonClickButton関数が実行され、textの設定値が""になり、初期化されるようになっています。

inputのvalue={text}という箇所があることで、このようなクリアボタンを設置すると、ボタンを押すことでinputの入力欄を空白にリセットすることもできます。

onClickButton関数の中の処理に、textの値を使って何らかの処理を行うことで、inputに入力した値に応じた処理が適宜実行でき、また、同時にinputの入力欄もリセットできます。

#まとめ
Reactの勉強をしていて、これ便利だなと思ったので、忘れないように記事にさせていただきました。
初学者の方の参考になれば、とても嬉しいです。