编辑：请参阅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;
    }
});

编辑 2015

有人用我的解决方案在 NPM 上做了一个项目：https : //github.com/lovasoa/react-contenteditable

编辑 06/2016：我刚刚遇到了一个新问题，当浏览器尝试“重新格式化”您刚刚提供给他的 html 时会出现这个问题，导致组件总是重新渲染。看

编辑 07/2016：这是我的生产 contentEditable 实现。它有一些react-contenteditable您可能想要的附加选项，包括：

• 锁定
• 允许嵌入 html 片段的命令式 API
• 重新格式化内容的能力

概括：

FakeRainBrigand 的解决方案在一段时间内对我来说效果很好，直到我遇到新问题。ContentEditables 很痛苦，而且处理 React 并不容易......

这个JSFiddle演示了这个问题。

如您所见，当您键入一些字符并单击 时Clear，内容并没有被清除。这是因为我们尝试将 contenteditable 重置为最后一个已知的虚拟 dom 值。

所以看起来：

• 您需要shouldComponentUpdate防止插入符号位置跳转
• 如果你使用shouldComponentUpdate这种方式，你就不能依赖 React 的 VDOM diffing 算法。

所以你需要一个额外的行，这样每当shouldComponentUpdate返回 yes 时，你就可以确定 DOM 内容实际上已更新。

所以这里的版本增加了一个componentDidUpdate并变成了：

var ContentEditable = React.createClass({
    render: function(){
        return <div id="contenteditable"
            onInput={this.emitChange} 
            onBlur={this.emitChange}
            contentEditable
            dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
    },

    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(){
        var html = this.getDOMNode().innerHTML;
        if (this.props.onChange && html !== this.lastHtml) {
            this.props.onChange({
                target: {
                    value: html
                }
            });
        }
        this.lastHtml = html;
    }
});

Virtual dom 仍然过时，它可能不是最有效的代码，但至少它确实有效 :)我的错误已解决

细节：

1）如果你放置 shouldComponentUpdate 来避免插入符号跳转，那么 contenteditable 永远不会重新渲染（至少在击键时）

2) 如果组件在击键时从不重新渲染，那么 React 会为这个 contenteditable 保留一个过时的虚拟 dom。

3) 如果 React 在其虚拟 dom 树中保留了 contenteditable 的过时版本，那么如果您尝试将 contenteditable 重置为虚拟 dom 中过时的值，那么在虚拟 dom diff 期间，React 将计算出没有更改应用于DOM！

这主要发生在：

• 您最初有一个空的 contenteditable (shouldComponentUpdate=true,prop="",previous vdom=N/A)，
• 用户输入一些文本，你阻止渲染（shouldComponentUpdate=false,prop=text,previous vdom=""）
• 用户单击验证按钮后，您想清空该字段（shouldComponentUpdate=false,prop="",previous vdom=""）
• 由于新生成的和旧的 vdom 都是 ""，因此 React 不会触及 dom。

这是对我有用的最简单的解决方案。

<div
  contentEditable='true'
  onInput={e => console.log('Text inside div', e.currentTarget.textContent)}
>
Text inside div
</div>

由于编辑完成后元素的焦点总是丢失，因此您可以简单地使用onBlur事件处理程序。

<div
  onBlur={e => {
    console.log(e.currentTarget.textContent);
  }} 
  contentEditable
  suppressContentEditableWarning={true}
>
  <p>Lorem ipsum dolor.</p>
</div>

这可能不是您正在寻找的答案，但我自己也在为此苦苦挣扎并且对建议的答案有疑问，因此我决定让它不受控制。

当editableprop is 时false，我text按原样使用prop，但是当它是时true，我切换到text没有效果的编辑模式（但至少浏览器不会吓坏了）。在此期间onChange由控件发射。最后，当我改editable回 时false，它会用传入的任何内容填充 HTML text：

/** @jsx React.DOM */
'use strict';

var React = require('react'),
    escapeTextForBrowser = require('react/lib/escapeTextForBrowser'),
    { PropTypes } = React;

var UncontrolledContentEditable = React.createClass({
  propTypes: {
    component: PropTypes.func,
    onChange: PropTypes.func.isRequired,
    text: PropTypes.string,
    placeholder: PropTypes.string,
    editable: PropTypes.bool
  },

  getDefaultProps() {
    return {
      component: React.DOM.div,
      editable: false
    };
  },

  getInitialState() {
    return {
      initialText: this.props.text
    };
  },

  componentWillReceiveProps(nextProps) {
    if (nextProps.editable && !this.props.editable) {
      this.setState({
        initialText: nextProps.text
      });
    }
  },

  componentWillUpdate(nextProps) {
    if (!nextProps.editable && this.props.editable) {
      this.getDOMNode().innerHTML = escapeTextForBrowser(this.state.initialText);
    }
  },

  render() {
    var html = escapeTextForBrowser(this.props.editable ?
      this.state.initialText :
      this.props.text
    );

    return (
      <this.props.component onInput={this.handleChange}
                            onBlur={this.handleChange}
                            contentEditable={this.props.editable}
                            dangerouslySetInnerHTML={{__html: html}} />
    );
  },

  handleChange(e) {
    if (!e.target.textContent.trim().length) {
      e.target.innerHTML = '';
    }

    this.props.onChange(e);
  }
});

module.exports = UncontrolledContentEditable;