在 ReactJS 中的 ContentEditable div 上中断 Enter 键答案

【问题标题】：Interrupt Enter Key On ContentEditable Div In ReactJS在 ReactJS 中的 ContentEditable div 上中断 Enter 键
【发布时间】：2016-05-20 20:47:29
【问题描述】：

我想中断 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>

【问题讨论】：

这有点令人困惑。可以举个例子吗？
对不起，我意识到有一些错误（我从我正在做的事情中移植了这个，并在那里留下了旧的逻辑）。你在找什么样的例子？
主要是您的问题措辞不当。不清楚您要达到的目标
我真的不明白这个问题是如何令人困惑的。如前所述，我想在 ReactJS 的内容可编辑 div 中中断回车键。例如，当我按下回车键时，我想提交内容可编辑 div 中的信息。但是，当您在内容可编辑的 div 中按 Enter 键时，DOM 会插入
标记和
标记以说明“新行”。我当前的解决方案去除了多余的
和
标记，但我想在事件传播和更改 DOM 之前捕捉回车键击。

标签： javascript reactjs dom-events contenteditable

【解决方案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>

【讨论】：

【解决方案2】：

将您的 div 与键盘事件绑定，然后：

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

【讨论】：