→ パート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でフォームを作成しようとした場合は、それについて教えてください。
