react中onFocus事件

2019年02月11日Web前端0

飞快且简单的了解下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事件。

React

目录