React でフォーム要素を操作する方法

2022/12/09

HTML フォーム要素は React では他の DOM 要素とは多少異なる動作をするため、React で開発する際のフォームとフォーム要素の操作は複雑になる可能性があります。

チェックボックス、テキストエリア、単一行テキスト入力などのフォームおよびフォーム要素の操作方法を学びます。

フォームの入力フィールドの管理

React では、フォーム内の入力フィールドの管理は、状態を作成し、それを入力フィールドにバインドすることによって達成されることがよくあります。

例えば：

function App() {

const [firstName, setFirstName] = React.useState('');


 function handleFirstNameChange(event) {
 setFirstName(event.target.value)
 }

return ( <form> <input type='text' placeholder='First Name' onInput={handleFirstNameChange} /> </form> ) }

上記には、 firstName状態、onInputイベント、およびhandleChangeハンドラーがあります。handleChange関数はキーストロークごとに実行され、firstName の状態を更新します。

このアプローチは、1 つの入力フィールドを操作する場合には理想的ですが、複数の入力フィールドを操作する場合、入力要素ごとに異なる状態とハンドラー関数を作成することは反復的になります。

このような状況で反復的で冗長なコードを記述しないようにするには、各入力フィールドに個別の名前を付け、フォームの初期状態値としてオブジェクトを設定してから、入力フィールドと同じ名前のプロパティでオブジェクトを埋めます。

例えば：

function App() {

const [formData, setFormData] = React.useState( { firstName: '', lastName: '' } );

return ( <form> <input type='text' placeholder='First Name' name='firstName' /> <input type='text' placeholder='Last Name' name='lastName' /> </form> ) }

formDataは、フォーム内のすべての入力フィールドを管理および更新するための状態変数として機能します。状態オブジェクトのプロパティの名前が入力要素の名前と同じであることを確認してください。

入力データで状態を更新するには、onInputイベントリスナーを入力要素に追加し、作成したハンドラー関数を呼び出します。

例えば：

function App() {

const [formData, setFormData] = React.useState( { firstName: '', lastName: '' } );


 function handleChange(event) {
		setFormData((prevState) => {
 return {
				...prevState,
 [event.target.name]: event.target.value
 }
 })
 }

return ( <form> <input type='text' placeholder='First Name' name='firstName' onInput={handleChange} /> <input type='text' placeholder='Last Name' name='lastName' onInput={handleChange} /> </form> ) }

上記のコードブロックでは、onInputイベントとハンドラ関数handleFirstNameChangeを使用しました。このhandleFirstNameChange関数は、呼び出されると状態プロパティを更新します。状態プロパティの値は、対応する入力要素の値と同じになります。

入力を制御コンポーネントに変換する

HTML フォームが送信されると、デフォルトの動作は、ブラウザーで新しいページに移動することです。この動作は、フォームに入力されたデータを検証する場合など、状況によっては不便です。ほとんどの場合、フォームに入力された情報にアクセスできる JavaScript 関数を使用する方が適していることがわかります。これは、制御されたコンポーネントを使用して React で簡単に実現できます。

index.html ファイルを使用すると、フォーム要素はその状態を追跡し、ユーザーの入力に応じて変更します。React では、状態設定関数は、コンポーネントの状態プロパティに格納されている動的状態を変更します。React 状態を唯一の信頼できる情報源にすることで、2 つの状態を組み合わせることができます。このように、フォームを作成するコンポーネントは、ユーザーがデータを入力したときに何が起こるかを制御します。React が制御する値を持つ入力フォーム要素は、制御コンポーネントまたは制御入力と呼ばれます。

React アプリケーションで制御された入力を利用するには、input 要素に value prop を追加します。

function App() {

const [formData, setFormData] = React.useState( { firstName: '', lastName: '' } );


 function handleChange(event) {
		setFormData((prevState) => {
 return {
				...prevState,
 [event.target.name]: event.target.value
 }
 })
 }

return ( <form> <input type='text' placeholder='First Name' name='firstName' onInput={handleChange} value={formData.firstName} /> <input type='text' placeholder='Last Name' name='lastName' onInput={handleChange} value={formData.lastName} /> </form> ) }

入力要素の値属性は、対応する状態プロパティの値に設定されるようになりました。制御されたコンポーネントを使用する場合、入力の値は常に状態によって決まります。

Textarea 入力要素の処理

textarea要素は通常の入力要素と似ていますが、複数行の入力を保持します。複数行を必要とする情報を渡す場合に便利です。

次のコードブロックに示すように、index.html ファイルでは、textarea タグ要素がその子によって値を決定します。

<textarea> Hello, How are you? </textarea>

React では、textarea要素を使用するために、タイプtextareaの input 要素を作成できます。

そのようです：

function App() {

return ( <form> <input type='textarea' name='message'/> </form> ) }

入力タイプとしてtextareaを使用する代わりに、以下に示すように、入力タイプタグの代わりにtextarea要素タグを使用することができます。

function App() {

return ( <form> <textarea name='message' value='Hello, How are you?' /> </form> ) }

textareaタグには、 textarea要素に入力されたユーザーの情報を保持する value 属性があります。これにより、デフォルトの React 入力要素のように機能します。

React のチェックボックス入力要素の操作

チェックボックスの入力を操作する場合、状況は少し異なります。typeチェックボックスの入力フィールドに value 属性がありません。ただし、checked属性があります。このchecked属性は、ボックスがチェックされているかどうかを判断するためにブール値を必要とするという点で、value 属性とは異なります。

例えば：

function App() {

return ( <form> <input type='checkbox' id='joining' name='join' /> <label htmlFor='joining'>Will you like to join our team?</label> </form> ) }

label 要素は、 htmlFor属性を使用して input 要素の ID を参照します。このhtmlFor属性は、入力要素 (この場合は結合) の ID を受け取ります。HTML フォームを作成する場合、htmlFor属性はfor属性を表します。

チェックボックスは、制御された入力として使用することをお勧めします。これを実現するには、状態を作成し、それに true または false の初期ブール値を割り当てます。

チェックボックス入力要素に 2 つの props を含める必要があります。checkedプロパティと、setIsChecked()関数を使用して状態の値を決定するハンドラー関数を含むonChangeイベントです。

例えば：

function App() {

const [isChecked, setIsChecked] = React.useState(false);


 function handleChange() {
		setIsChecked((prevState) =>! prevState)
 }

return ( <form> <input type='checkbox' id='joining' name='join' checked={isChecked} onChange={handleChange} /> <label htmlFor='joining'>Will you like to join our team?</label> </form> ) }

このコードブロックはisChecked状態を生成し、その初期値をfalseに設定します。input 要素のchecked属性にisCheckedの値を設定します。チェックボックスをクリックするたびに、 handleChange関数が起動し、isCheckedの状態値を反対に変更します。

フォーム要素には、チェックボックス、テキストなど、異なるタイプの複数の入力要素が含まれる可能性があります。

このような場合、同じタイプの複数の入力要素を処理した方法と同様の方法で処理できます。

次に例を示します。

function App() {

let[formData, setFormData] = React.useState( { firstName: '' join: true, } );


 function handleChange(event) {
 const {name, value, type, checked} = event.target;
		setFormData((prevState) => {
 return {
				...prevState,
				[name]: type === checkbox?  checked:  value
 }
 })
 }

return ( <form> <input type='text' placeholder='First Name' name='firstName' onInput={handleChange} value={formData.firstName} /> <input type='checkbox' id='joining' name='join' checked={formData.join} onChange={handleChange} /> <label htmlFor='joining'>Will you like to join our team?</label> </form> ) }

handleChange関数では、setFormData は三項演算子を使用して、ターゲットの入力タイプがチェックボックスの場合、 checkedプロパティの値を状態プロパティに割り当てることに注意してください。そうでない場合は、 value属性の値を割り当てます。

React フォームを扱えるようになりました

ここでは、さまざまなフォーム入力要素を使用して React でフォームを操作する方法を学びました。また、チェックボックスを操作するときに value prop または checked prop を追加して、制御された入力をフォーム要素に適用する方法も学びました。

React フォームの入力要素を効率的に処理すると、React アプリケーションのパフォーマンスが向上し、全体的なユーザーエクスペリエンスが向上します。

フォームの入力フィールドの管理

入力を制御コンポーネントに変換する

Textarea 入力要素の処理

React のチェックボックス入力要素の操作

React フォームを扱えるようになりました

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル