浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【create-react】入力した文字を出力する方法

またまたcreate-reactについてです。今回は、テキストボックスに入力した値を画面上に出力する方法です。

reactは、通常親コンポーネントから子コンポーネントに渡した値をthis.stateで更新しますが、render()内に書き込んでも値を更新することができます。

初級ですがreactを触ったばかりという方の力になれたらなと思います。

いきなりですが、まずconstractorで初期値”james”を定義します。その後にpropで子コンポーネントに渡しています。

その後に自由に値を入力することができるコードがこちらです。

スクショのようにonchangeでイベントを定義することで、name: e.target.valueでnameの中身jamesに続く値をsetstateで更新することができます。

アプリのログイン時にパスワードを入力するときに●が後追って表示されるけどあんな感じに使われるのかな?

イメージしやすいので簡単ですね。今日もこんな感じで少ないですが少しずつ情報を増やしてアウトプットしていきたいと思います。

reactは画面遷移の手段が面倒だったりes5とes6の書き方で大きく変わったりと最初のうちは手がかかりますが、決まり事を守って書いていけばプログラミング歴の浅い方でもクオリティの高いアプリを作ることができそうです。

良いUIフレームワークも揃っているので、こちらもぜひともマスターして使いこなしたいですね、それでは!

  • この記事いいね! (0)