Question

我有以下React组件，其中我试图重新实现我自己的语法高亮和自动完成功能来构建文本编辑器*。

当我不使用chrome调试器时，onInput和onKeydDown事件都会触发，但是当我在onInput（首先触发）上放置调试器断点时，onInput事件似乎永远不会触发。为什么？我能做些什么呢？

// Box containing my forula (which consists of text, transformed into many <span>s);
var SyntaxBox = React.createClass({

  //basically a custom eventing system
  _emitChangeEvent: function(){
    console.log('changeEvent'); // <-- this will always log. But if a place a chrome breakPoint here, and then step through, the onInput event is never fired.
    var node = this.refs.formulaEditor.getDOMNode();
    var formula = node.textContent; //this is the concat of just the content of all child elements. see https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent
    if(this.props.onChange && formula !== this.props.formula){
      this.props.onChange({
        target: {
          value: formula.replace(/\u00a0/g, " ") //strip out and replace &nbsp (unicode 00a0) with normal spaces
        } //this value gets sent to listeners in the parent component
      });
    }
  },

  _captureNavigation: function(event){
    console.log('keyDown'); // <-- this is always logged unless a breakpoint is placed in the console.log above in _emitChangeEvent. Why? And is there a workaround?
  },

  render: function() {
    return (
      <div>
        <div>
          <code
            onInput={this._emitChangeEvent}
            onKeyDown={this._captureNavigation}
            contentEditable
            ref='formulaEditor'
            dangerouslySetInnerHTML={{__html: this.state.html}}>
          </code>
        </div>
      </div>
        );
  },

  componentWillReceiveProps: function(nextProps){
    var formulaString = nextProps.formula;
    var formattedHTML = highlighter.colorise(formulaString); //external helper function that does syntax highlighting by taking a string and returning styles span tags
    this.setState({html: formattedHTML});
  }

});

*我还没有找到一个图书馆，这将使我能够控制（1）要突出显示的单词以及如何设置它们的样式，以及（2）自动完成列表的UI和视图选项以及如何选择它们。

如何在React组件中调试事件的顺序

0 个答案: