Reactフレームワーク、
Formから値を取得する
について解説です。
フォームにコードを打ち込むと、
ほぼ同時にHTML上に文字が反映されます
イメージはこちらです↓
運営者プロフィール
現在はIT企業のプロダクトマネージャーとして、個人向け/社内向けシステムなど、複数のシステム開発・運営に携わっています。
Webサイト構築やECサイトの開発経験に加えて、PythonなどのプログラミングやSalesforceなどのクラウドアプリケーションに関する幅広い知識・経験を活かして「プログラミング初心者がスムーズに学べるサイト」を目指しています。
Githubでは、趣味で作成したアプリなどを公開しています。
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
コードイメージ動画
コード
import React from "react"
class App extends React.Component{
constructor(){
super()
this.state = {
firstName: ""
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({firstName: e.target.value})
}
render(){
return (
<form>
<input type="text" placeholder="First Name" onChange={this.handleChange} />
<h1>{this.state.firstName}</h1>
</form>
)
}
}
export default App
解説
constructor()内
this.state = {firstName:””}
stateにキーを作成する
handleChange関数
handleChange(e) {
this.setState({firstName: e.target.value})
}関数名()内の(e)は(event)とする方も多いかと思います
これにより、
e.target.value
として、打ち込んだ文字を取得することができます
{firstName: e.target.value}
をsetStateすることで、打ち込んだ文字がconstructor()で作成したfirstNameに代入される
render()内、inputタグ
onChangeに上記のhandleChange関数を入れる
下の、<h1>タグで、state.firstNameを表記する
まとめ
以上となります
まとめると、
- constructor内で、this.stateにキーを作成
- handleChange関数でそのキーにinputされた値を入れるよう指示を出す
- inputタグのonChangeとhandleChange関数を紐づけ、h1タグでthis.stateを表記する
となります
ご自身でも色々と試してみて下さい！
本日もありがとうございました！