State

React.jsのStateを理解しようヘ(^o^)ノ

Stateを使ってみる (App.js)

• Reactはstateを変更すると、変更された部分を再描画（実際はすべてなんだけど）してくれるのでDOMの管理しなくていい
  • propsも変更できるけど再描画してくれない（プロパティだからね)
• this.state.xxx って感じでアクセスできる

import React from 'react'

class App extends React.Component {
  constructor(){
    super()

    // stateのデフォルト値
    this.state = {
      name: 'Shinosaka.rb'
    }
  }
  render(){
    return <div>Hello { `${this.state.name} #${this.props.number}` } </div>
  }
}

// デフォルト値をセット
App.defaultProps = {
  name: 'Shinosaka.rb'
}

// タイプを指定
App.propTypes = {
  // 文字列
  name: React.PropTypes.string,
  // 数値で必須
  number: React.PropTypes.number.isRequired
}

export default App

Hello Shinosaka.rb #23 と表示されたら 🎉

テキストボックスに入力された文字を表示してみる

• イベントの引数で参照できるオブジェクト
  • SyntheticEvent
• イベント一覧
  • Supported Events

import React from 'react'

class App extends React.Component {
  constructor(){
    super()

    // stateのデフォルト値
    this.state = {
      name: 'Shinosaka.rb'
    }
  }
  onChangeName(e){
    this.setState({
      name: e.target.value
    })
  }
  render(){
    // propsからstateへ
    return (
      <div>
        <h1>Hello { `${this.state.name} #${this.props.number}` } </h1>
        <input type="text" onChange={this.onChangeName.bind(this)} />
      </div>
    )
  }
}

// デフォルト値をセット
App.defaultProps = {
  name: 'Shinosaka.rb'
}

// タイプを指定
App.propTypes = {
  // 文字列
  name: React.PropTypes.string,
  // 数値で必須
  number: React.PropTypes.number.isRequired
}

export default App

テキストボックスに文字を入力して勉強会の名前を変更できれば 🎉