首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React.js: contentEditable的onChange事件

React.js: contentEditable的onChange事件
EN

Stack Overflow用户
提问于 2014-03-27 11:52:31
回答 8查看 141.6K关注 0票数 149

如何侦听contentEditable-based控件的更改事件?

代码语言:javascript
复制
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/

EN

回答 8

Stack Overflow用户

发布于 2018-10-03 02:51:27

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

代码语言:javascript
复制
<div
  contentEditable='true'
  onInput={e => console.log('Text inside div', e.currentTarget.textContent)}
>
Text inside div
</div>
票数 71
EN

Stack Overflow用户

发布于 2019-08-06 04:21:06

因为当编辑完成时,元素的焦点总是丢失的,您可以简单地使用onBlur钩子。

代码语言:javascript
复制
<div onBlur={(e)=>{console.log(e.currentTarget.textContent)}} contentEditable suppressContentEditableWarning={true}>
     <p>Lorem ipsum dolor.</p>
</div>
票数 26
EN

Stack Overflow用户

发布于 2014-10-03 02:10:52

这可能不是你正在寻找的答案,但我自己也在努力解决这个问题,并对建议的答案有问题,我决定让它变得不受控制。

editable属性为false时,我会按原样使用text属性,但当它为true时,我会切换到编辑模式,在该模式下text不起作用(但至少浏览器不会崩溃)。在此期间,控件将触发onChange。最后,当我将editable改回false时,它会用传递给text的内容填充HTML

代码语言:javascript
复制
/** @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;
票数 18
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22677931

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档