【React】Reactに爆速で入門する3。GN125、グラディウス400のメンテナンス/カスタムブログです。バイクGNブログRSSまとめカメラ/写真/絶景IT系GN125作成したスマホアプリ/Webアプリたち【React】Reactに爆速で入門する3。ReactHOMEIT系Javascript【React】Reactに爆速で入門する3。結果はじめに前回では、親コンポーネントから値を流し込んで、その値をリスト表示しました。今回は、その画面表示した値に、画面からの入力値を追加していくというコードを書いていきます。ここまでできれば、親-子コンポーネントの関係、値表示、イベントハンドルまでが出来るようになりますので、とりあえずReactでの開発ができるようになってくる、はずです。実践で使うにはまだ足りませんが入門としては最低限やったはずです。my_items宣言までの間に、下記を追記します。document.getElementById("ListApp-text").value})});}}[/javascript]そして、最後のReactDOM.renderの第1引数を下記のように修正します。/>この部分は、今回追加したクラスを最初に画面に表示したいのでタグ名を修正しただけですね。ListAppについてconstructorsuperの部分は前回と同じです。this.stateの部分が今回新しい部分で、そのコンポーネント内部に状態(値)を持ちたい場合にstateとして定義します。今回は、リスト表示部の値を保持しておきたいので、this.stateの定義をし、外から受け取ったprops.itemsをitemsプロパティにセットしておきます。render前回作成したMyListを内包しています。こんな感じでコンポーネントの再利用というか、が出来るのがReactの嬉しいところらしいです。MyListコンポーネントに、リスト表示は全てお任せしますので、前回のようにitems属性にリスト表示させたいthis.state.itemsを渡します。ひとつの大きな修正点としては、button要素とクリックイベントです。buttonはただのbutton要素で、onClickもHTML純正のイベント付与の属性ですね。ここで、this.handleClick.bind(this)をonClickに渡しています。this.handleClickはrenderの次のメソッドであるhandleClickメソッドを指しています。bind(this)は、おまじないとして付与しておいて下さい。bind(this)するのかというと、こちらの記事に書いてありますが、ES6でReactComponentを作成した場合、イベントハンドラでthisがundefinedになるため、thisを明示的に渡してあげる必要があります。handleClickpureJSのようなJavascriptのイベントハンドラです。eventオブジェクトを引数として受け取ります。このeventオブジェクトはHTML+pureJSのオブジェクトとは異なるようです。this.setStateメソッドにて、constructorで宣言したstateオブジェクトに値をセットすることができます。今回は、リストを更新したいので、itemsプロパティを更新します。ちなみに、今回は面倒だったのでdocument.getElementByIdにてinput要素の値を取得していますが、たぶんあんまり推奨されない方法かなと思います。真面目にやるのであれば、input要素にonChangeを付与して、クラスにchangeHandleメソッドを作成し、そのメソッド内でstateの値を更新して、handleClick内ではstateの値をもとにitemsを更新する、というのが望ましいと思われます。結果こんな感じになります。次回からは、npmを使ってwebpackやbabelをインストールして、webpackベースでトランスパイル&バンドルしていく、的なところをやっていこうと思います。今回は以上です!次回はこちら。【React】Reactに爆速で入門する4。hidetaso[...]【WebSlides】HTML+CSS+Javascriptでプレゼン資料を作成したら割とウケた話。2019.01.04作成した資料はこちらです。入門05】データベース(SQLServer)を扱う。2016.10.09今回は、Talendでデータベースを扱います。今回は、アプリを1件公開しました、という話題です。私がPhonegapに出会ったのは、去年(2015年)の10月でした。今回は、新たにwebアプリを1個公開しました、というお話です。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。【Javascript】爆速でChrome拡張プラグイン開発を試す。作り方は意外とかんたんでした。【Talend】グローバル変数の使い方(globalMapとcontext)【Talend】条件分岐(if)する4つの方法をまとめました【JSF入門02】ボタン押下時のイベントを扱う。入門01】開発環境の構築。TalendをインストールしようETL開発ツールは比較するまでもなくTalend一択だと思う。入門02】CSVデータを変換する。Talendの使い方からはじめます。【エストレヤ】なんと妹がバイク乗りになるらしい。いうわけでバイクを購入しました。Songバイクでツーリングいこっ!心に残る絶景を写真にGN倶楽部IT系カテゴリの最新記事2019.03.06Wordpress,【WordPress】突然固定ページが404エラーで表示されなくなった!?ので私の対処法を書きます。WebSlides,【WebSlides】HTML+CSS+Javascriptでプレゼン資料を作成したら割とウケた話。React,【React】Reactに爆速で入門する4。React,【React】Reactに爆速で入門する3。React,【React】Reactに爆速で入門する2。WordPress.。