React.js：onChange事件for contentEditable [英] React.js: onChange event for contentEditable

问题描述

如何收听 contentEditable 的控件的更改事件？

How do I listen to change event for contentEditable-based control?

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的答案，修复了我的实现中的错误。

See Sebastien Lorber's answer which fixes a bug in my implementation.

使用onInput事件，并可选择使用onBlur作为备用。您可能希望保存以前的内容以防止发送额外的事件。

Use the onInput event, and optionally onBlur as a fallback. You might want to save the previous contents to prevent sending extra events.

我个人将此作为我的渲染功能。

I'd personally have this as my render function.

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

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

jsbin

其中使用这个简单的包装器围绕contentEditable。

jsbin

Which uses this simple wrapper around 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;
    }
});

这篇关于React.js：onChange事件for contentEditable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！