Javascript React editablecontent div在键入/重新呈现时失去焦点

在ContentEditable中键入时，每个新字符都会导致元素模糊并可能重新渲染。删除ContentEditable的父元素Highlight时，它会保持焦点，但不幸的是，我需要语法突出显示功能。我试着像在一个类似的问题中建议的那样为ContentEditable添加一个键，但没有成功。任何关于如何解决这一问题的想法都会大有裨益。谢谢大家!

主要成分

var Stdin = React.createClass({
  getInitialState: function(){
    return {html: ""};
  },
  handleChange: function(evt){
    console.log('evt: ', $.extend({}, evt));
    this.setState({html: evt.nativeEvent.target.textContent});
    evt.preventDefault();
    return false;
  },
  copyContent: function() {
    $("#fake-input").val($("#real-input").html());
    return true;
  },
  render: function () {
    return (
      <div id="stdin">
        <div className="arrow-right"></div>
        <form action="#" onSubmit={this.copyContent}>
          <input type="text" id="real-input"></input>
          <Highlight className='css'>
            <ContentEditable key="fake-input" id="fake-input" html={this.state.html} onChange={this.handleChange}/>
          </Highlight>
          <input type="submit"/>
        </form>
      </div>
      );
  }
});

var Highlight = React.createClass({
  displayName: 'Highlight',

  getDefaultProps: function getDefaultProps() {
    return {
      innerHTML: false,
      className: ''
    };
  },
  componentDidMount: function componentDidMount() {
    this.highlightCode();
  },
  componentDidUpdate: function componentDidUpdate() {
    this.highlightCode();
  },
  highlightCode: function highlightCode() {
    var domNode = this.getDOMNode();
    var nodes = domNode.querySelectorAll('pre code');
    if (nodes.length > 0) {
      for (var i = 0; i < nodes.length; i = i + 1) {
        hljs.highlightBlock(nodes[i]);
      }
    }
    return false;
  },
  render: function render() {
    if (this.props.innerHTML) {
      console.log("hey1");
      return React.createElement('div', { dangerouslySetInnerHTML: { __html: this.props.children }, className: this.props.className || null });
    } else {
      console.log(this.props.children);
      return React.createElement(
        'pre',
        null,
        React.createElement(
          'code',
          { className: this.props.className, key: 'code-key' },
          this.props.children
        )
      );
    }
  }
});

var ContentEditable = React.createClass({
    render: function(){
       return React.createElement('div', { onInput: this.emitChange, onBlur: this.emitChange, contentEditable: true, dangerouslySetInnerHTML: {__html: this.props.html}, id: this.props.id, className: this.props.className});
    },

    shouldComponentUpdate: function(nextProps){
        return nextProps.html !== this.getDOMNode().innerHTML;
    },

    componentDidUpdate: function() {
        if ( this.props.html !== this.getDOMNode().innerHTML ) {
           this.getDOMNode().innerHTML = this.props.html;
        }
    },

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

---

我也有同样的问题。我的第一个解决方案是从render方法中删除所有

React.createX（）

。在React中创建元素会导致重新渲染

---

我仍然有这个问题，但也许这可以解决你的问题。

试试这个。该模式来自react文档中表单输入的示例

    var ContentEditable = React.createClass({
            getInitialState: function(){
                return {html: ""};
            },
            render: function(){
                var html = {__html: this.state.html};

                return React.createElement('div', { onInput: this.emitChange, onBlur: this.emitChange, contentEditable: true, dangerouslySetInnerHTML: {html}, id: this.props.id, className: this.props.className});
            },

            componentDidMount() {
                if (this.props.html) this.setState({html: this.props.html});
            }
            componentWillReceiveProps(nextProps) {
                if (nextProps.html && (this.state.html != nextProps.html))
                    {this.setState({html: nextProps.html});}
            }

            emitChange: function(evt){
                    var html = this.getDOMNode().innerHTML;
                    if (this.props.onChange && html !== this.state.html) {
                        this.setState({html: html})
                        evt.target = { value: html };
                        this.props.onChange(evt);
                    }
            }
    });

---

谢谢不幸的是，这并没有解决问题。我将尝试！您建议将

React.createX（）

替换为什么？@henrymb67尝试使元素成为React中的一个独立组件。引用该组件并通过props传递其变量。也许本文档有点帮助：并且：