possible rx-react events integration

gistfile1.js

// in this first option events handlers are just RxJs functor Subject
// those subject are passed down to the render function and are manually injected into
// the properties of react component


var RxReact = require('rx-react');
var React = require('react');



var TodoList = RxReact.createClass({
  render(props) {
    return <ul>{props.items.map(text => <li>{text}</li>)}</ul>;
  }
});

var TodoApp = RxReact.React.createClass({
  getInitialState() {
    return {items: [], text: ''};
  },
  
  init(comp) {
    var change = RxReact.Event.create();
    var submit = RxReact.Event.create();
    
    
    change
      .map((e) => e.target.value)
      .subscribe(text => comp.setState({text}));
               
    submit
      .subscribe(e => {
        e.preventDefault();   
        var nextItems = comp.state.items.concat([comp.state.text]);
        var nextText = '';
        comp.setState({items: nextItems, text: nextText});
      });
    
    return {submit, change};
  },
  
  render(props, state, events) {
     return (
      <div>
        <h3>TODO</h3>
        <TodoList items={state.items} />
        <form onSubmit={events.submit}>
          <input onChange={events.change} value={state.text} />
          <button>{'Add #' + (state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});
        

React.render(<TodoApp />, document.getElementById('app'));

//vs

// in this second option the 'comp' passed to the init function expose a function 'observableFromEvent'
// that allows to retrieve an observable sequence from a property name (the event name) and a selector.
// the events handlers are automaticly injected in the properties of the react component children



var RxReact = require('rx-react');
var React = require('react');



var TodoList = RxReact.createClass({
  render(props) {
    return <ul>{props.items.map(text => <li>{text}</li>)}</ul>;
  }
});

var TodoApp = RxReact.React.createClass({
  getInitialState() {
    return {items: [], text: ''};
  },
  
  init(comp) {
    
    comp.observableFromEvent('onChange', 'input')
      .map((e) => e.target.value)
      .subscribe(text => comp.setState({text}));
               
    comp.observableFromEvent('onSubmit', 'form')
      .subscribe(e => {
        e.preventDefault();   
        var nextItems = comp.state.items.concat([comp.state.text]);
        var nextText = '';
        comp.setState({items: nextItems, text: nextText});
      });
  },
  
  render(props, state) {
     return (
      <div>
        <h3>TODO</h3>
        <TodoList items={state.items} />
        <form>
          <input value={state.text} />
          <button>{'Add #' + (state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});
        

React.render(<TodoApp />, document.getElementById('app'));

Yup there is another case that bother me also :

RxReact.createClass({
 init(comp) {
   comp.observableFromEvent('onClick','button').subscribe(....)
 },
 render(props) {
  return (
    <div>
      <button>button 1</button>
      <button onClick={props.onClick}>button2</button> // will be overriden 
   </div>
 }
})