【react-obs】ReactでObserverが使えるようにしてみた

Reactで小さなものをサクッと作りたいのに、コンポーネント間のやり取りがめんどくさそうだったのでRios.jsのように簡単なイベント操作でデータをやり取りできるようにしてみました。

Github - react-obs

せっかくなのでbowerにも登録してみました。

bower install react-obs

使い方はREADMEの通りなのですが、ES6でReactを使う際に継承先をちょっと変えてあげるだけでObserveのためのメソッドが使用できます。

class Foo extends ReactObs {

  constructor (props) {
    super(props);
    this.on('hello', this.A, this); // イベント登録
  }

  A (_this, message) {
    console.log(message);
  }

  B (e) {
    e.preventDefault();
    this.trigger('hello', e.target.text.value); // イベント呼び出し
  }

  render () {
    return (<form onSubmit={this.B.bind(this)}>
      <textarea name="text"></textarea>
      <button>submit</button>
    </form>);
  }
}

実際にこれでTODOアプリのデモも作ってみました。