またまたcreate-reactについてです。今回は、テキストボックスに入力した値を画面上に出力する方法です。
reactは、通常親コンポーネントから子コンポーネントに渡した値をthis.stateで更新しますが、render()内に書き込んでも値を更新することができます。
初級ですがreactを触ったばかりという方の力になれたらなと思います。
いきなりですが、まずconstractorで初期値”james”を定義します。その後にpropで子コンポーネントに渡しています。
その後に自由に値を入力することができるコードがこちらです。
スクショのようにonchangeでイベントを定義することで、name: e.target.valueでnameの中身jamesに続く値をsetstateで更新することができます。
アプリのログイン時にパスワードを入力するときに●が後追って表示されるけどあんな感じに使われるのかな？
イメージしやすいので簡単ですね。今日もこんな感じで少ないですが少しずつ情報を増やしてアウトプットしていきたいと思います。
reactは画面遷移の手段が面倒だったりes５とes6の書き方で大きく変わったりと最初のうちは手がかかりますが、決まり事を守って書いていけばプログラミング歴の浅い方でもクオリティの高いアプリを作ることができそうです。
良いUIフレームワークも揃っているので、こちらもぜひともマスターして使いこなしたいですね、それでは！
