ReactJS onBlur排除

Question

我的react应用程序呈现了一个文本输入，它具有同时处理onKeyDown (使用条件来检查键是'Enter‘还是'Backspace')和onBlur的功能。'Enter‘和'Backspace’都会将焦点放在不同的输入上，从而触发onBlur，这会产生我不希望的fetch调用。如何避免按Enter和Backspace触发onBlur？我在其他框架中看到了一些解决方案，但这个问题是针对react的。

handleKeyDown = (event) => {
   if(event.key == 'Enter') 
      //adds new object via fetch(), focuses on new input
   if(event.key == 'Backspace' && !event.target.value)
      //deletes current object via fetch(), focuses on previous input
}

handleOnBlur = (event) => {
   //edits existing item via fetch()
}

render() {
  return (
    <div>
      {displayData.map((item, i) => (
       <div>
         <input
           value={item}
           onChange={this.handleChange.bind(this)}
           onKeyDown={this.handleKeyDown.bind(this)}
           onBlur={this.handleOnBlur.bind(this)} />
       </div>
      ))}
    </div>
  )}

我正在尝试使它不会触发onblur事件，因此我无法使用条件if(event.key !== 'Backspace' || event.target.value)开始handleOnBlur函数，任何帮助都将不胜感激。

Answer 1

你能做这样的事情吗，跟踪一个局部变量，它通知onBlur继续w/ a获取？

constructor() {
    ...
    this.isBlurKeyDownInvoked = false;
}

handleKeyDown = (event) => {
   if(event.key == 'Enter')  {
      this.isBlurKeyDownInvoked = true;

      //adds new object via fetch(), focuses on new input
   }
   if(event.key == 'Backspace' && !event.target.value)
      this.isBlurKeyDownInvoked = true;

      //deletes current object via fetch(), focuses on previous input
   }
}      

handleOnBlur = (event) => {
    if (this.isBlurKeyDownInvoked) {
        this.isBlurKeyDownInvoked = false;
        return;
    }
    ...
}