書かれたものです「はじめてのReact」一覧に戻る前回のテキストボックスに続き、今回はプルダウン(<select>)の操作方法になります。<ol>などのリストにも適用できます。参考ページメンバーリストComponentメンバーの一覧をプルダウンとして表示し、名前をクリックすると削除されるComponentです。Keys」のサンプルコードを参考にしています。-実行結果プルダウンはブラウザの拡大機能で大きくしています。クリックするとその要素が削除されるのがわかります。要素を作成するmapメソッドで要素を作成するrender()内でプルダウンを作成しています。ここではReactではなくJavaScriptに搭載されているmapメソッドで配列の要素に対し順番に処理を施し、最終結果を変数listItemsへ返却しています。);この配列に対しmapで処理を回していくのは、React使いの間ではよくやる手法だそうです。わかりづらい場合は簡単なサンプルを実行してみると良いかと思います。出力されるkey属性ここで新たにkey属性が登場しています。これはリストなどの複数の要素を作成する際にReactが要求してくる物で、各要素で重複しないユニークな値をつけてあげる必要があります。付けない場合は実行時エラーとなります。prop.Reactは内部でこのkeyを参照しながら、render()時に最小限の更新となるよう工夫をしているようです。パフォーマンスに関わるところだったんですね。初期値を変更するHTMLで言うところのselectedの値を指定するには、render()で返却しているJSXの<select>要素にdefaultValue属性を記述します。以下のようにすると2番目の要素が選択された状態で表示されます。defaultValue="Bar">{listItems}</select>;選択されている値を動的に管理する前述のdefaultValueは動的に管理しないプルダウンの初期値を設定する物です。Stateなどに入れて管理する場合はvalueを使用します。以下のコードではPropsからもらってきた値をStateに入れ、プルダウンの値が変更されたらonChangeイベントで拾ってStateの更新を行っています。document.getElementById('root'));なおonChangeイベントを未定義だと以下のように実行時エラーが発生してしまいますのでご注意を。自宅警備がてらゲームのお仕事や講師などしてご飯を食べてます。ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。コメントデータの処理方法の詳細はこちらをご覧ください。ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。