Reactで小さなものをサクッと作りたいのに、コンポーネント間のやり取りがめんどくさそうだったのでRios.jsのように簡単なイベント操作でデータをやり取りできるようにしてみました。
せっかくなので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アプリのデモも作ってみました。