在ReactJS中中断ContentEditable Div上的Enter键输入

Question

我想要拦截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>

- Conner Frey

---

这有点令人困惑。能否请您举个例子？ - Noah Passalacqua

抱歉，我意识到有些错误（我从正在开发的项目中移植了这个代码，并且留下了旧逻辑）。您需要什么样的示例？ - Conner Frey

主要问题在于你的表述不够清晰，不太明白你想要达到什么目的。 - Noah Passalacqua

我并不认为这个问题有什么困惑。如所述，我想在ReactJS中中断可编辑内容的div中的enter键。例如，当我按下enter键时，我想提交可编辑div中的信息。但是，当您在可编辑div中按下enter键时，DOM会插入<div>标签和<br>标签，以便考虑“新行”。我的当前解决方案会剥离多余的<div>和<br>标签，但我想在事件传播并更改DOM之前捕获enter键击。 - Conner Frey

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>

- Conner Frey

Answer 2

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

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

- ZhiLI