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

问题描述

如何监听基于 contentEditable 的控件的更改事件?

var Number = React.createClass({渲染:函数(){返回 
<span contentEditable={true} onChange={this.onChange}>{this.state.value}</span>={this.state.value}
;},onChange:函数(v){//不触发 :(console.log('改变', v);},getInitialState:函数(){返回{值:'123'}}});React.renderComponent(, 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({渲染:函数(){返回 

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/

解决方案

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

---

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

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:contentEditable 的 onChange 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！