我想要拦截Enter键并阻止它向
本质上,我正在使用这个作为一个"随内容自适应的输入框"。如果有更好的方法,请告诉我!
ContentEditable
div注入html代码。我的当前代码无法起作用,因为它没有拦截Enter键。然而,如果我输入、按下enter,再次输入,它会删除内部的html元素。但是,这仍然不是我想要的。我希望在按下Enter键时,这些元素从一开始就不要进入ContentEditable
div,而不是必须将它们剥离。本质上,我正在使用这个作为一个"随内容自适应的输入框"。如果有更好的方法,请告诉我!
import ReactDOM from 'react-dom'
export default class MyInput extends React.Component {
componentWillReceiveProps(nextProps) {
this.setState({value: nextProps.html});
}
shouldComponentUpdate(nextProps){
return nextProps.html !== ReactDOM.findDOMNode(this).innerHTML;
}
componentDidUpdate() {
if ( this.htmlEl && this.props.html !== this.htmlEl.innerHTML ) {
this.htmlEl.innerHTML = this.props.html;
}
}
emitChange(){
var html = ReactDOM.findDOMNode(this).innerHTML;
// regex to remove tags created after pressing enter
value = value.replace(/<div>/g, '');
value = value.replace(/<\/div>/g, '');
value = value.replace(/<br>/g, '');
if (this.props.onChange && html !== this.lastHtml) {
this.props.onChange(html);
}
this.lastHtml = html;
this.forceUpdate();
}
render() {
var html = this.state.value;
return (
<div
dangerouslySetInnerHTML={{__html: html}}
onInput={this.emitChange.bind(this)}
onBlur={this.emitChange.bind(this)}
contentEditable
></div>
)
}
};<kbd>