防止 React 捕获制表符

IT技术 javascript jquery reactjs react-jsx
2021-05-19 10:16:49

我有一个输入字段。我想让 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 按键被拦截并执行后续代码，但Tab 字符被插入到输入文本字段中。我如何防止这种情况发生？

我尝试了preventDefault, stopPropagation, 的各种组合stopImmediatePropagation。我可以得到没有进一步的字符被插入到输入文本字段的结果，但随后没有执行任何代码。

我错过了什么？

2个回答

按下“ 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} />

我希望它有帮助;)。

我认为这与您同时传递 onChange 和 onKeyDown 处理程序的事实有关。

我认为您有以下选择：

  1. 尝试更改这些处理程序的顺序：onKeyDown - 首先，onChange - 第二。我不确定这会有所帮助。
<input type="text" value={this.state.name} onKeyDown={this.handleKeyUp} onChange={this.handleChangeName} />
  1. 您可以在单个处理程序中处理这两种情况，例如 onKeyDown 或 onKeyPress。
handleKeyPress(e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    return alert('hey ho lets go');
  }

  this.setState({name: e.target.value});  
}
其它你可能感兴趣的问题
上一篇React 钩子常量的 useMemo 与 useState 下一篇如何扩展“连接”组件？