Reactを使ったユーザーの動きに合わせた表示の変更
step1
stateの定義をする
import React from 'react'; class App extends React.Component { constructor(props) { super(props); // stateをオブジェクトの形で定義する this.state = {name:'g0'} }
step2
stateの表示をする
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = {name:'g0'} } render() { return ( // 通常のオブジェクトと同じように取得できる <div>私の名前は{this.state.name}です</div> ); } }
step3
stateの変更をする
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = {name: 'g0-I'}; } render() { return ( <div> <h1>私の名前は{this.state.name}です</h1> // ボタンをクリックするとstateを変更する処理を追加 <button onClick={() => {this.setState({name:'GO-I'})}}>名前変更ボタン</button> </div> ); } } export default App;