[解決済み] React.js：contentEditableのonChangeイベント

質問

の変更イベントをリッスンするにはどうすればよいですか？ contentEditable -をベースにしたコントロールはありますか？

var Number = React.createClass({
    render: function() {
        return <div>
            <span contentEditable={true} onChange={this.onChange}>
                {this.state.value}
            </span>
            =
            {this.state.value}
        </div>;
    },
    onChange: function(v) {
        // Doesn't fire :(
        console.log('changed', v);
    },
    getInitialState: function() {
        return {value: '123'}
    }    
});

React.renderComponent(<Number />, document.body);

http://jsfiddle.net/NV/kb3gN/1621/

解決方法は？

編集する。 参照 Sebastien Lorberの回答 これは、私の実装のバグを修正したものです。

onInputイベントを使用し、フォールバックとしてオプションでonBlurを使用します。 余分なイベントを送信しないように、以前の内容を保存しておくとよいでしょう。

個人的にはこれをレンダー関数にしたい。

var handleChange = function(event){
    this.setState({html: event.target.value});
}.bind(this);

return (<ContentEditable html={this.state.html} onChange={handleChange} />);

jsbin

これは、contentEditableの周りのこの単純なラッパーを使用しています。

var ContentEditable = React.createClass({
    render: function(){
        return <div 
            onInput={this.emitChange} 
            onBlur={this.emitChange}
            contentEditable
            dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
    },
    shouldComponentUpdate: function(nextProps){
        return nextProps.html !== this.getDOMNode().innerHTML;
    },
    emitChange: function(){
        var html = this.getDOMNode().innerHTML;
        if (this.props.onChange && html !== this.lastHtml) {

            this.props.onChange({
                target: {
                    value: html
                }
            });
        }
        this.lastHtml = html;
    }
});