Reactチュートリアルパート24：2番目のフォームレッスン

今日、Reactでのフォームの使用に関する議論を続けます。 前回は、コンポーネントとテキストフィールドの相互作用の特徴を調べました。 ここでは、他のフォーム要素の操作について説明します。



→ パート1：コースの概要、React、ReactDOM、JSXの人気の理由
→ パート2：機能コンポーネント
→ パート3：コンポーネントファイル、プロジェクト構造
→ パート4：親コンポーネントと子コンポーネント
→ パート5：TODOアプリケーションの作業の開始、スタイリングの基本
→ パート6：コースの一部の機能、JSXおよびJavaScriptについて
→ パート7：インラインスタイル
→ パート8：TODOアプリケーションの継続的な作業、コンポーネントのプロパティに精通
→ パート9：コンポーネントのプロパティ
→ パート10：コンポーネントのプロパティとスタイルの操作に関するワークショップ
→ パート11：動的マークアップ生成およびマップ配列メソッド
→ パート12：ワークショップ、TODOアプリケーションの作業の第3段階
→ パート13：クラスベースのコンポーネント
→ パート14：クラスベースのコンポーネント、コンポーネントのステータスに関するワークショップ
→ パート15：コンポーネントヘルスワークショップ
→ パート16：TODOアプリケーションの作業の第4段階、イベント処理
→ パート17：TODOアプリケーションの作業の第5段階、コンポーネントの状態の変更
→ パート18：TODOアプリケーションの作業の6番目の段階
→ パート19：コンポーネントのライフサイクルメソッド
パート20：条件付きレンダリングの最初のレッスン
→ パート21：条件付きレンダリングに関する2番目のレッスンとワークショップ
→ パート22：TODOアプリケーションの作業の第7段階、外部ソースからのデータのダウンロード
→ パート23：フォームの操作に関する最初のレッスン
→ パート24：2番目のフォームレッスン
→ パート25：フォームの操作に関するワークショップ
→ パート26：アプリケーションアーキテクチャ、コンテナ/コンポーネントパターン
→ パート27：コースプロジェクト

レッスン42.フォームの使用、パート2

→ オリジナル

このレッスンでは、複数行テキストを入力するためのフィールド、フラグ、ラ​​ジオボタン（「ラジオボタン」とも呼ばれます）、およびリストボックスについて説明します。 これまで、通常のテキスト入力フィールドでのみ作業することを検討してきました。
以下は、今日の実験を開始するAppコンポーネントのコードです。

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       const {name, value} = event.target       this.setState({           [name]: value       })   }     render() {       return (           <form>               <input                   type="text"                   value={this.state.firstName}                   name="firstName"                   placeholder="First Name"                   onChange={this.handleChange}               />               <br />               <input                   type="text"                   value={this.state.lastName}                   name="lastName"                   placeholder="Last Name"                   onChange={this.handleChange}               />                             {                   /**                    *    :                    *                    * <textarea />                    * <input type="checkbox" />                    * <input type="radio" />                    * <select>  <option>                    */               }                             <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

これは、作業のこの段階でブラウザに表示されるアプリケーションページの外観です。


ブラウザのアプリケーションページ

フォームには通常、短い行が入力されるフィールドだけでなく、 フォームに他の要素を装備する場合、Reactでそれらを操作するのは少し複雑ですが、これについて特別なことは何もありません。

上記のコードには、コメントアウトされたフラグメントがあり、これから説明する要素をリストしています。 複数行テキストを入力するフィールドtextarea要素から始めましょう。 彼と仕事をする方法を理解するのがおそらく最も簡単でしょう。 通常のHTMLフォームを作成するときにこの要素を使用していた場合、これはinput要素の場合のように自己終了タグではないことがわかります。 開閉部品があります。
コメントの直後に次のコードを挿入して、この要素をフォームに追加します。

 <br /> <textarea></textarea> 

アプリケーションページを見ると、複数行テキストを入力するフィールドがどのように表示されているかを確認できます。


ページにテキストを入力するためのフィールド

ご覧のとおり、このフィールドは通常のフィールドよりわずかに高く、ユーザーは右下のマーカーを使用してサイズを変更できます。 rowsとrowsの属性のおかげで、この要素を説明するときに、その次元を示すことができます。 通常のHTMLでは、このフィールドを表示した後にテキストを表示したい場合は、要素の開始タグと終了タグの間に目的のテキストを入力することでこれを行います。 Reactでは、このような要素の操作は、前回説明したinput要素の操作と可能な限り似ています。 つまり、Reactでは、 textareaタグは自己終了します。 つまり、ページにフィールドを表示するためのコードは次のように変更できます。

 <textarea /> 

さらに、このタグでvalue属性を使用できます。さらに、通常のテキストフィールドの同じ属性を使用するvalueとまったく同じ方法で作業します。 このため、さまざまな要素での作業の均一性が達成され、さらに、そのようなフィールドに関連付けられた状態プロパティを更新することにより、フィールドのコンテンツを更新することが容易になります。 フィールドコードの状態を次のフォームに移してみましょう。

 <textarea value={"Some default value"}/> 

これにより、指定されたテキストがページに表示されるときにフィールドに表示されます。


フィールドに表示されるテキスト

複数行のテキストを入力するフィールドの操作に戻りますが、ここではチェックボックスについて説明します。 チェックボックスは、タイプがcheckboxであるinputコントロールです。 彼の説明は次のとおりです。

 <input type="checkbox" /> 

このマークアップで説明されているフラグがページ上でどのように見えるかを次に示します。


チェックボックス

このコントロールの主な機能は、 value属性を操作するときに使用されないという事実です。 ユーザーにいくつかの2つのオプションの選択肢を提供するために使用されます。1つはチェックボックスに対応し、もう1つはチェックされていないオプションに対応します。 チェックボックスがチェックされているかどうかを追跡するために、 checked属性が使用されます。これは論理値で記述されます。 その結果、フラグは通常、状態に格納されている論理プロパティに対応します。

コンポーネントの状態を次の形式にしましょう。

 this.state = {   firstName: "",   lastName: "",   isFriendly: true } 

フラグの説明コードは次のように変更されます。

 <input   type="checkbox"   checked={this.state.isFriendly} /> 

その後、選択したチェックボックスがページに表示されます。


チェックボックス

確かに、今では彼は彼のクリックには反応しません。 実際には、フラグは状態に格納されている対応する変数に関連付けられているため、この場合、Reactで状態を確認し、 isFriendlyプロパティisFriendly trueに設定されていることを確認することで、これを削除できません。 同時に、フィールドを変更するメカニズム（ onChangeイベントonChange ）を提供しておらず、読み取り専用状態で表示されたことを示す警告がコンソールに表示されます。


コンソール警告

フラグを操作するための特別なメソッドを記述することもできますが、コンポーネントのコードにはすでにhandleChange()メソッドがあります。 現在では、テキストフィールドの操作に使用されています。 このフラグを使用してフラグを操作する方法について考えます。 これを行うには、最初に上記のメソッドをフラグのonChangeイベントonChange割り当て、フラグに関連する状態プロパティの名前に対応する名前をフラグに割り当てます。 さらに、ラベルタグを使用してフラグに署名します。

 <label>    <input       type="checkbox"       name="isFriendly"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Is friendly? </label> 

以下にコードが示されているhandleChange()メソッドで、テキストフィールドを操作するときに、要素のname （ name ）とそのコンテンツ（ value ）を見つけた後、特定の名前のフィールドを書き込むことで状態を更新しましたそのvalue属性：

 handleChange(event) {   const {name, value} = event.target   this.setState({       [name]: value   }) } 

ここで、 value属性を持たないフラグを処理する方法を理解する必要があります。 これには、 checked属性のみがあり、 trueまたはfalse値のみを受け入れることができます。 その結果、 handleChange()メソッドを使用してフラグを操作するには、このハンドラーが呼び出される要素がフラグであるかどうかを確認する必要があります。 このチェックを実行するために、フラグを表すinput要素のタイプ（ type ）がcheckbox設定されていることを思い出してください。 この値を確認するには、 event.target要素のtypeプロパティを参照できます。 次の構成を使用して、このプロパティとevent.targetからcheckedれたプロパティを抽出します。

 const {name, value, type, checked} = event.target 

これで、 type定数の値を確認し、イベントハンドラーが呼び出される要素がフラグであるかどうかを確認できます。 この場合、 checked定数にあることが判明した状態に書き込みchecked 。 テキストフィールドの操作を担当するコードを保存することを忘れないでください。 その結果、 handleChange()コードhandleChange()次の形式handleChange()取ります。

 handleChange(event) {   const {name, value, type, checked} = event.target   type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value }) } 

その後、フラグの動作を確認します。


フラグの動作を確認します

ご覧のとおり、これを削除してインストールできます。 同時に、テキストフィールドの作業は中断されません。 チェックボックスに関する通知はコンソールから消えましたが、複数行テキストを入力するフィールドに関する通知がそこに表示されます。 このフィールドを説明するコードを次のように変更します。

 <textarea   value={"Some default value"}   onChange={this.handleChange} /> 

これにより、コンポーネントのツールを使用してこのフィールドを操作するための他のメカニズムを実装しませんでしたが、通知が消えます（フィールドの名前を指定せず、対応するプロパティを状態に追加しませんでした）。 これらの機能は自分で実装できます。 次に、スイッチについて説明します。

これらは、 textおよびcheckboxタイプのinput要素の組み合わせとして表すことができます。 ここでの意味は、スイッチにvalue属性とchecked属性の両方があるvalueです。 フォームにいくつかのスイッチを追加し、フラグ記述コードに基づいてコードを作成します。 これは次のようなものです。

 <label>   <input       type="radio"       name="gender"       value="male"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Male </label> <br /> <label>   <input       type="radio"       name="gender"       value="female"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Female </label> 

フラグ記述コードに基づいてこのコードを作成しましたが、まだ何も編集していません。 したがって、スイッチは奇妙な動作をします。 特に、チェックボックスがオフになっている場合、両方のスイッチは「オフ」状態にあり、チェックボックスを選択すると、どちらかが「オン」になります。 既存の要素のコードに基づいて作成された要素コードを慎重に処理することにより、このようなエラーを防ぐことができます。 今それを修正します。
これらの2つの要素は同じ名前- genderことに注意してください。 同じ名前のスイッチがグループを形成します。 このようなグループに含まれるスイッチは1つだけ選択できます。

スイッチを構成するときに、いくつかの状態プロパティがtrue場合、 checked値がtrue設定されていることを単に示すことはできません。 スイッチは、グループ内での同期状態の変更をサポートする必要があります。 代わりに、スイッチのchecked値は条件によって設定されます。 私たちの場合、この条件はthis.state.genderのstateプロパティを文字列maleまたはfemaleと比較することで表されます。 スイッチ記述コードでは、次のようになります。

 <label>   <input       type="radio"       name="gender"       value="male"       checked={this.state.gender === "male"}       onChange={this.handleChange}   /> Male </label> <br /> <label>   <input       type="radio"       name="gender"       value="female"       checked={this.state.gender === "female"}       onChange={this.handleChange}   /> Female </label> 

次に、新しいプロパティgenderを状態に追加し、空の文字列で初期化します。

 this.state = {   firstName: "",   lastName: "",   isFriendly: false,   gender: "" } 

その後、スイッチはチェックボックスに関係なく機能します。 コンポーネントが出力するコードに、選択されているスイッチに関する情報を表示する第2レベルのヘッダーを追加します。

 <h2><font color="#3AC1EF">You are a {this.state.gender}</font></h2> 

ここでは、おそらく、条件付きレンダリングのメカニズムを導入する価値があります。 これにより、ページを開いたとき、ラジオボタンが選択されていないときに、 You are aというテキストYou are a表示されないようにできますが、自分で実装することはできますが、これは行いません。 では、得られたものを見てみましょう。


アプリケーションページを切り替えます

ここで話したことはすべて非常に複雑に思えるかもしれません。 特に、これはさまざまなコントロールの機能の記憶に関するものです。 フォームでの作業を簡素化するために、特殊なライブラリを使用できます。 たとえば、 formikライブラリ。 このライブラリは、Reactアプリケーションでフォームを開発するプロセスを大幅に簡素化します。

次に、リストフィールドについて説明します。

通常のHTMLでは、次の構成体を使用してコンボボックスを記述します。

 <select>   <option></option>   <option></option>   <option></option> <select/> 

Reactも同様のアプローチを取りますが、他の要素と同様に、 value属性が使用されます。 これにより、どのリスト項目が選択されているかを正確に見つけやすくなり、さらに、コンポーネントの状態での作業が容易になります。

ユーザーがお気に入りの色を選択できるコンボボックスを作成するとします。 これを行うには、 select要素のvalue属性に次の構成要素を配置selectます： value={this.state.favColor} 。 これにより、ユーザーが選択した値が取得されます。 次に、状態にfavColorを追加します。

 this.state = {   firstName: "",   lastName: "",   isFriendly: false,   gender: "",   favColor: "blue" } 

次に、コンボボックスにonChangeイベントonChangeを装備し、名前を付けます。 また、コンボボックスのoptions要素に値の値を割り当て、ボックスに表示されるテキストを入力します。

select署名select要素は、署名を使用すると次のようになります。

 <label>Favorite Color:</label> <select   value={this.state.favColor}   onChange={this.handleChange}   name="favColor" >   <option value="blue">Blue</option>   <option value="green">Green</option>   <option value="red">Red</option>   <option value="orange">Orange</option>   <option value="yellow">Yellow</option> </select> 

次に、ユーザーのお気に入りの色を表示する別の碑文をフォームに追加します。

 <h2><font color="#3AC1EF">Your favorite color is {this.state.favColor}</font></h2> 

コンボボックスを試してみましょう。


コンボボックス

ご覧のように、私たちのフォームは洗練されたデザインでは輝きませんが、フォームに配置されたコントロールは期待どおりに機能します。

ReactでのReactコントロールの編成方法のおかげで、同じハンドラーを使用してイベントを処理するのは簡単です。 これはまさに私たちのケースで使用されている作業スキームです。 handleChange()ハンドラーの唯一の機能は、特別な方法でフラグイベントを処理する必要があることです。

次に、フォームの送信、または入力完了後の入力値の処理について説明します。 このようなアクションの実装には2つのアプローチがあります。 それらのいずれかを使用する場合、フォームにはボタンが装備されている必要があります。

 <button>Submit</button> 

HTML5では、 button要素がフォームで見つかった場合、 submit型の古いinput要素として機能します。 このボタンをクリックすると、 onSubmitフォーム自体のイベントがトリガーされます。 フォームの完成後に何かを行う必要がある場合は、ボタンにonClickイベントonClickを追加できますが、たとえば、個人的にそのようなイベントをフォームレベルで処理し、 onSubmitイベントハンドラーを割り当てることをonSubmit 。

 <form onSubmit={this.handleSubmit}> 

このイベントのハンドラーとして使用されるメソッドはまだ作成されていません。 これは通常のイベントハンドラで、たとえば特定のAPIを参照して、フォームデータを渡します。

まとめ

このレッスンでは、Reactでフォームを操作することについて説明します。 次回は、このトピックに関する実践的な作業を見つけます。

親愛なる読者！ formikライブラリを使用してReactでフォームを作成しようとした場合は、それについて教えてください。