ReactJS中ContentEditable Div上的Interrupt Enter键

Question

我想中断Enter key并停止将html代码注入ContentEditable div。我当前的代码不起作用，因为它不会中断Enter key。但是，如果我键入内容，请按Enter键，然后再次键入，它将删除内部html元素。但是，这不是我想要的。我希望元素在我按Enter时不进入ContentEditable div，而不必将其剥离。

我基本上是用这个作为input that scales with its content。如果有更好的方法可以进行此操作，请告诉我！

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

Answer 1

  //  function handler inside class declaration
  keyPress(event) {
    if(event.charCode == 13) {
      event.preventDefault()
    }
  }

  //  in render function
  <div
    dangerouslySetInnerHTML={{__html: html}}
    onInput={this.emitChange.bind(this)}
    onBlur={this.emitChange.bind(this)}
    onKeyPress={this.keyPress.bind(this)}
    contentEditable
  ></div>