在 ReactJS 中中断 ContentEditable Div 上的回车键

Question

我想中断 Enter 键并阻止它将 html 代码注入 ContentEditable div。我当前的代码不起作用，因为它不会中断 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>

Answer 1

用键盘事件绑定你div然后:

var keyCode = event.which || event.keyCode;
keyCode === 13 && event.preventDefault();

Answer 2

  //  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>

在 ReactJS 中中断 ContentEditable Div 上的回车键

Interrupt Enter Key On ContentEditable Div In ReactJS

javascript

contenteditable

dom-events

reactjs