react中onFocus事件

2019年02月11日Web前端

飞快且简单的了解下react中的focus事件。

一、原生focus事件

在一些表单元素,甚至是div上,focus事件都是比较常用的。我们都知道focus事件是不会冒泡的,和他一堆的blur事件也是。

正是因为如此,新的一队聚焦和失焦事件就出现了,focusin和focusout,他和前者的唯一区别就是这两事件会冒泡,也就是他们能捕获子孙元素的聚焦和失焦事件。

二、react中的focus事件

用create-react-app脚手架生成项目,修改App.js中的代码,

class App extends Component {
    focusFn = (e) => {
        console.log(e.target.className);
    }
    render() {
        return (
            <div className="outer" tabIndex="-1" onFocus={this.focusFn}>
                <div className="middle" tabIndex="-1">
                    <div className="inner" tabIndex="-1"></div>
                </div>
            </div>
        );
    }
}

三个连环的div,用于方便的查看点击事件。至于如何让div上可以被聚焦(tabindex),可以查看我的这篇文章:tabindex属性及特殊用法

为了清楚地看到各个div,增加些样式:

.outer {
    width: 150px;
    height: 150px;
    border: 1px solid #ccc;
}
.middle {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
.inner {
    width: 50px;
    height: 50px;
    border: 1px solid red;
}

运行后点击不同的div框,focus事件都会生效,也就达到了focusin的冒泡效果。

三、总结

所以说,当要使用focusin时,我们无需用dom的方式去绑定,直接使用react原生的onFocus事件就行了,因为这个原生事件实际就是focusin。

详细的demo可以查看这:react中onFocus事件