React 输入类型更改在 Firefox 中触发模糊事件

Question

我在 react 中有一个输入字段（作为引导程序 FormControl），如果它在焦点上，它将其类型从文本更改为数字。

这个想法是用户只能输入数字，但如果它不在焦点上，它会变回文本并显示单位。这在 chrome 中运行良好。但是，在 Firefox 中，当我更改输入字段的类型或销毁它（有条件地渲染）时，它会触发一个模糊事件。

所以我的问题是：有什么方法可以区分 firefox 触发的模糊事件（在销毁或类型更改时）和用户专注于其他事情的模糊触发？

行为可以在这个fiddle中看到。

onBlur() => this.setState({ focused: false });

Answer 1

也许在 onBlur 函数中添加e.preventDefault() 或e.stopPropagation()。但是，您可以检查 onBlur 事件的相关目标。如果relatedTarget 不是输入字段，focus 将是focus:false。也许这不是最好的方法，但它确实有效。

  onBlur(e) {
    console.log('blur is called');
    if(!e.relatedTarget || e.relatedTarget.className !== "form-control" ) {
     this.setState({ focused: false });
    } 
  }