ES6とReact.jsでTodoアプリ作ってる

f:id:kuriya0909:20150929065319p:plain

React.jsの勉強のとっかかりとしてTodoアプリを現在作っています。
Todoアプリを作成する記事は散見していますが、ES6でやってる記事はあまり無くて
私自身が欲しいと思ったので書きました。(笑)

注意として、
当方はReact.js初心者のためカッチリ理解できておりません。
訂正等あれば教えて下さい。自分でも気づいたら修正します。
また、基本的にES6で記述しており、
ES5で記述されている際は下記の問題は発生しない可能性がございます。

まだ作成途中ですが、実装していて詰まったところを掻い摘んでご紹介。

環境

React.js -> 0.13.3

結論

React.createClassの記述
getInitialStateの記述
テキストボックスに文字入力できない問題
setStateが動作しない問題
イベント全般(未解決)

React.createClass記述

facebookの公式サイトのtutorialでは、React.createClassを使ったんだけどES6では使わないらしい。
代わり(こちらの方が正しいのか)React.Componentを継承し、クラスを作成します。

    class TodoApp extends React.Component {
        ....
    }

facebook.github.io

getInitialStateの記述

ES6からはclassという予約語を使ってクラスを定義出来るようになりました。
そのおかげで、コンストラクタも定義できるようになり、getInitialStateはコンストラクタ内で処理してあげます。

Refactoring React Components to ES6 Classes - New Media Campaigns

facebook.github.io

テキストボックスに文字入力できない問題

流れを下記に記載

初期値はpropsに定義。
コンストラクタでstateに挿入
value={state.user}の表記方法で参照

valueにstate.userの値を渡していたが、
それだと何を入力してもテキストボックス内が更新されず。
defaultValueにattributeを変更することで正常に動作した。

    <input type="text" defaultValue={this.state.user} 
      onChange={this.onChange.bind(this)} />

setStateが動作しない問題

文字を入力した際に、ラベルを同期する処理を書いていました。
onChangeのattributeでハンドラを定義し、諸々の処理も問題なし。
ただ再描画を伝播させるsetStateだけが何故か動作しない。
理由はまだ未調査ですが、onChangeのhandlerにbind(this)を付加することで
正常に動作しました。(stateがHTML内に存在しないからbindしてあげる？)
すみません。ちゃんと調査します。

    return (
        <div>
            <h2>Hello, {this.state.user} !</h2>
            <input type="text" defaultValue={this.state.user}
             onChange={this.handleChange.bind(this)} />
        </div>
    );