contentEditable기반 제어에 대한 변경 이벤트를 수신하려면 어떻게합니까 ?

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/

편집 : 내 구현의 버그를 수정하는 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을 "재 포맷"하려고 할 때 발생하는 새로운 문제가 발생하여 구성 요소가 항상 다시 렌더링됩니다. 보다

2016 년 7 월 편집 : 여기 내 프로덕션 콘텐츠 편집 가능한 구현입니다. 다음을 react-contenteditable포함하여 원하는 추가 옵션 이 있습니다.

• 잠금
• HTML 조각을 포함 할 수있는 명령형 API
• 콘텐츠를 다시 포맷하는 기능

요약:

FakeRainBrigand의 솔루션은 새로운 문제가 발생할 때까지 한동안 꽤 잘 작동했습니다. ContentEditables는 고통스럽고 React를 다루기가 정말 쉽지 않습니다 ...

이 JSFiddle 은 문제를 보여줍니다.

보시다시피 일부 문자를 입력하고을 클릭 Clear하면 내용이 지워지지 않습니다. 이는 contenteditable을 마지막으로 알려진 가상 DOM 값으로 재설정하려고하기 때문입니다.

따라서 다음과 같이 보입니다.

• shouldComponentUpdate캐럿 위치 점프를 방지 해야 합니다.
• shouldComponentUpdate이런 식으로 사용하면 React의 VDOM diffing 알고리즘에 의존 할 수 없습니다 .

따라서 shouldComponentUpdate예를 반환 할 때마다 DOM 콘텐츠가 실제로 업데이트되었는지 확인할 수 있도록 추가 줄이 필요합니다 .

따라서 여기 버전은 a를 추가하고 다음 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는이 콘텐츠에 대한 오래된 가상 돔을 편집 가능하게 유지합니다.

3) React가 가상 DOM 트리에서 오래된 버전의 contenteditable을 유지하는 경우 가상 DOM에서 오래된 값으로 contenteditable을 재설정하려고하면 가상 DOM diff 중에 React는 변경 사항이 없다고 계산합니다. DOM에 적용하십시오!

이것은 주로 다음과 같은 경우에 발생합니다.

• 처음에 비어있는 contenteditable이 있습니다 (반드시 ComponentUpdate = true, prop = "", previous vdom = N / A),
• 사용자가 일부 텍스트를 입력하고 렌더링을 방지합니다 (shouldComponentUpdate = false, prop = text, previous vdom = "").
• 사용자가 유효성 검사 버튼을 클릭 한 후 해당 필드를 비워야합니다 (shouldComponentUpdate = false, prop = "", previous vdom = "").
• 새로 생성 된 vdom과 기존 vdom이 모두 ""이므로 React는 dom을 건드리지 않습니다.

이것은 나를 위해 일한 가장 간단한 솔루션입니다.

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

이것은 아마도 당신이 찾고있는 대답이 아닐 수도 있지만,이 문제로 어려움을 겪고 제안 된 대답에 문제가있어서 대신 통제하지 않기로 결정했습니다.

때 editable소품은 false, 내가 사용 text이기 때문에 소품을하지만,이 때 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;

편집이 완료되면 요소의 포커스가 항상 손실되므로 onBlur 후크를 사용하면됩니다.

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

이 작업을 수행하기 위해 mutationObserver를 사용하는 것이 좋습니다. 무슨 일이 일어나고 있는지에 대한 더 많은 제어를 제공합니다. 또한 찾아보기가 모든 키 입력을 해석하는 방법에 대한 자세한 정보를 제공합니다.

여기 TypeScript에서

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 ...
            </div>
        );
    }

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

다음은 lovasoa에 의해이 많은 부분을 통합하는 구성 요소입니다. https://github.com/lovasoa/react-contenteditable/blob/master/index.js

그는 emitChange에서 이벤트를 shims합니다.

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

비슷한 접근 방식을 성공적으로 사용하고 있습니다.