React.js: contentEditable的onChange事件

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

React.js: contentEditable的onChange事件

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);

/** @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;

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;
}

import * as React from 'react';
export default class Editor extends React.Component {
    private _root: HTMLDivElement; // Ref to the editable div
    private _mutationObserver: MutationObserver; // Modifications observer
    private _innerTextBuffer: string; // Stores the last printed value
    public componentDidMount() {
        this._root.contentEditable = "true";
        this._mutationObserver = new MutationObserver(this.onContentChange);
        this._mutationObserver.observe(this._root, {
            childList: true, // To check for new lines
            subtree: true, // To check for nested elements
            characterData: true // To check for text modifications
    public render() {
        return (
            <div ref={this.onRootRef}>
                Modify the text here ...
    private onContentChange: MutationCallback = (mutations: MutationRecord[]) => {
        mutations.forEach(() => {
            // Get the text from the editable div
            // (Use innerHTML to get the HTML)
            const {innerText} = this._root; 
            // Content changed will be triggered several times for one key stroke
            if (!this._innerTextBuffer || this._innerTextBuffer !== innerText) {
                console.log(innerText); // Call this.setState or this.props.onChange here
                this._innerTextBuffer = innerText;
    private onRootRef = (elt: HTMLDivElement) => {
        this._root = elt;
}

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

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

<div 
    contentEditable={true}
    onSelect={() => callMeOnSelect()}
    onChange={() => callMeOnChange()}
    onMouseUp={() => callMeOnMouseUp()}
    className="myClassNameHere"/>

let selection = window.getSelection().toString();

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

<div
  onBlur={e => setState(e.target.innerText)}
  contentEditable
  suppressContentEditableWarning={true}
  <p>Lorem ipsum dolor.</p>
</div>

const noop = () => {};
const ContentEditable = ({
  html,
  onChange = noop,
  html: string;
  onChange?: (s: string) => any;
}) => {
  const ref = useRef<HTMLDivElement>(null);
  const lastHtml = useRef<string>('');
  const emitChange = () => {
    const curHtml = ref.current?.innerHTML || '';
    if (curHtml !== lastHtml.current) {
      onChange(curHtml);
    lastHtml.current = html;
  useEffect(() => {
    if (!ref.current) return;
    if (ref.current.innerHTML === html) return;
    ref.current.innerHTML = html;
  }, [html]);
  return (
      onInput={emitChange}

React.js: contentEditable的onChange事件

8 个回答