ContentEditable不更新虚拟DOM

问题描述

我遇到了一个问题，即contenteditable无法更新虚拟DOM。如果您看到下面的gif，则可以通过单击加号将所选项目（我编辑过）的图标副本添加到该项目旁边，但是该元素的先前状态正在复制。

我需要的行为是，通过单击加号图标，应复制更新的元素。

class TextInput extends React.Component {
    constructor(props) {
        super(props);
        let body = {bgColor:''};
        body.content = props.children ? props.children : '<span style="color:lightgrey !important; font-weight:light !important;">'+props.placeholder+'</span>';
        this.state = body;
    }

    focus(event){
        let target = event.target;
        target.style.outline = "2px dashed lightgray";
        if(target.innerText == target.getAttribute('placeholder')){
            this.setState({content:''});
        }
    }

    blur(event){
        let target = event.target;
        target.style.outline = "none";

        var html = target.innerHTML;
        if (this.props.onChange && html !== this.lastHtml) {
            this.props.onChange({
                target: {
                    value: html
                }
            });
        }
        this.lastHtml = html;

        this.setState({
            content:html
        });

        if( target.innerText == '' ){
            this.setState({content:'<span style="color:lightgrey !important; font-weight:light !important;">'+target.getAttribute('placeholder')+'</span>'});
        }
    }

    shouldComponentUpdate(nextProps){
        return nextProps.html !== ReactDOM.findDOMNode(this.refs.contentEditable).innerHTML;
    }

    change(event){
        let target = event.target;
        this.setState({
            content:target.innnerText
        });
    }

    render() {
        return <div>
            <div ref="contentEditable" contentEditable={true} dangerouslySetInnerHTML={{__html: this.state.content}} suppressContentEditableWarning={true} className="textarea" placeholder={this.props.placeholder} onMouseEnter={this.mouseEnter.bind(this)} onMouseLeave={this.mouseLeave.bind(this)} onFocus={this.focus.bind(this)} onBlur={this.blur.bind(this)}></div>
            <textarea onChange={this.change.bind(this)} name={this.props.name} value={this.state.content}></textarea>
        </div>;
    }
}

class EditorToolbar extends React.Component{
    render(){
        return <div className="hoverbox-container">
            <span className="hoverbox">
                <i className="fa fa-plus" onClick={this.props.evCopyElem}></i>
            </span>
        </div>;
    }
}

class Body extends React.Component{
    constructor() {
        super();

        this.state = {
           "summaries":[
              "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s. This is a new text.","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
           ]
        };

        this.state.activeElement = -1;
    }

    mouseEnter(index,event){
        this.setState({activeElement:index});
    }

    copy_elem(type,index,event){
        if( type == 'summaries' ){
            let arr = this.state[type];
            arr.splice(index,arr[index]);
            this.setState({ summaries: arr });
        }
    }

    render(){
        var that = this;

        return <div>
            {
                this.state.summaries && this.state.summaries.length ? <Container fluid>
                    <Row>
                        { this.state.summaries.map(function(element,index){
                            return <Col xs={6} className="mb-25" key={index} onMouseEnter={that.mouseEnter.bind(that,'summaries'+index)}>
                                {that.state.activeElement == 'summaries'+index ? <EditorToolbar evCopyElem={that.copy_elem.bind(that,'summaries',index)} /> : ''}
                                <TextInput name='summaries' placeholder='Enter Overview,Job History,Activities and Summary'>{element}</TextInput>
                            </Col>;
                        }) }
                    </Row>
                    <br />
                </Container> : ''
            }
        </div>
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）