Question

我一直试图找出React中的键绑定，而且我有点卡住了。

我放置了一个onKeyPress，并在我的输入上尝试了一个onKeyDown。这允许我处理所有字母和Enter键。

然而，我还没有找到一个好方法来处理箭头键和Esc键，而不只是创建一个document.addEventListener（＆＃39; keydown＆＃39;＆＃39;，this.onKeypress ）

任何人都有更好的解决方案吗？

Answer 1

您可以使用focus和blur事件来控制事件处理程序的生命周期。

render() {
  return (
    <input ref={inputLoaded} type="text" />
  );
},
inputLoaded(input) {
  input.addEventListener('focus', this.addEventListeners);
  input.addEventListener('blur', this.removeEventListeners);
  this.input = input;
},
componentWillUnmount() {
  this.input.removeEventListener('focus', this.addEventListeners);
  this.input.removeEventListener('blur', this.removeEventListeners);
  window.removeEventListener('keydown', this.handleKey);
},
addEventListeners() {
  window.addEventListener('keydown', this.handleKey);
},
removeEventListeners() {
  window.removeEventListeners('keydown', this.handleKey);
},
handleKey(event) {
  // this only gets called if input is focused.
  // do something with this key
}

或者，您可以使用focus和blur事件来控制state变量，然后在执行某些操作之前检查输入是否在handleKey方法内有焦点工作

反应中的键绑定

1 个答案: