Question

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

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

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

此fiddle中可以看到该行为。

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

Answer 1

也许在onBlur函数中添加了e.preventDefault()或e.stopPropagation()。但是，您可以在onBlur事件上检查relatedTarget。如果relatedTarget不是输入字段，则focus将是focus:false。也许这不是最好的方法，但是可行。

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

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

1 个答案: