防止React捕获制表符

Question

我有一个输入字段.我希望React检查是否在此字段中按下了选项卡.如果是,则处理该字段的内容(例如ajax调用).

getInitialState: function() {
  return { name: "" }; 
},

handleChangeName: function(e) {
  this.setState({name: e.target.value});
},

handleKeyUp: function(e) {
  if (e.keyCode == 9) {
    e.preventDefault();
    alert("Execute ajax call after tab pressed");
  }
},

<input type="text" value={this.state.name} onChange={this.handleChangeName}
   onKeyDown={this.handleKeyUp} />

问题:

截取Tab键并执行后续代码,但将制表符插入输入文本字段.我该如何防止这种情况发生？

我曾尝试各种组合preventDefault,stopPropagation,stopImmediatePropagation.我可以得到一个结果,没有进一步的字符被插入到输入文本字段中,但后来没有执行后续代码.

我错过了什么？

Answer 1

当按下' Tab ' 时,不会调用onKeyUp或onKeyPress上的事件,因为它之前触发了onBlur,你需要用onKeyDown捕获它.您可以尝试使用事件键而不是keyCode,如上例所示.

功能:

 handleKeyDown: function(e) {
    if (e.key === "Tab") {
      e.preventDefault();
      alert("Execute ajax call after tab pressed");
    }
  }

输入:

<input type="text" onKeyDown={this.handleKeyDown} />

我希望它有所帮助;).

Answer 2

我认为这在某种程度上与您传递 onChange 和 onKeyDown 处理程序这一事实有关。

我认为你有以下选择：

1. 尝试更改这些处理程序的顺序：onKeyDown - 首先，onChange - 第二。我不确定这会有帮助。

<input type="text" value={this.state.name} onKeyDown={this.handleKeyUp} onChange={this.handleChangeName} />

2. 您可以在 onKeyDown 或 onKeyPress 等单个处理程序中处理这两种情况。

handleKeyPress(e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    return alert('hey ho lets go');
  }

  this.setState({name: e.target.value});  
}