React.js: contentEditable的onChange事件
React.js: contentEditable的onChange事件
提问于 2014-03-27 11:52:31
如何侦听contentEditable-based控件的更改事件？
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);回答 8
Stack Overflow用户
发布于 2018-10-03 02:51:27
这是对我有效的最简单的解决方案。
<div
contentEditable='true'
onInput={e => console.log('Text inside div', e.currentTarget.textContent)}
>
Text inside div
</div>Stack Overflow用户
发布于 2019-08-06 04:21:06
因为当编辑完成时，元素的焦点总是丢失的，您可以简单地使用onBlur钩子。
<div onBlur={(e)=>{console.log(e.currentTarget.textContent)}} contentEditable suppressContentEditableWarning={true}>
<p>Lorem ipsum dolor.</p>
</div>Stack Overflow用户
发布于 2014-10-03 02:10:52
这可能不是你正在寻找的答案，但我自己也在努力解决这个问题，并对建议的答案有问题，我决定让它变得不受控制。
当editable属性为false时，我会按原样使用text属性，但当它为true时，我会切换到编辑模式，在该模式下text不起作用(但至少浏览器不会崩溃)。在此期间，控件将触发onChange。最后，当我将editable改回false时，它会用传递给text的内容填充HTML
/** @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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22677931
复制相关文章
相似问题
腾讯云开发者
