Question

我的反应应用渲染了一个文本输入，它具有处理onKeyDown（使用条件来检查键是'Enter'还是'Backspace'）和onBlur的函数。 “Enter”和“Backspace”都会导致关注不同的输入，从而触发onBlur，这会产生我不想要的提取调用。如何排除按Enter和Backspace来触发onBlur？我在其他框架中看到了一些解决方案，但这个问题具体反应。

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>
  )}

我试图让它变成Enter或Backspace的keydown不会触发onblur事件，blur事件没有key属性所以我无法用条件if(event.key !== 'Backspace' || event.target.value)开始handleOnBlur函数，任何帮助将不胜感激。

Answer 1

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

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;
    }
    ...
}

ReactJS onBlur排除

1 个答案: