关于react官方文档Advanced Guide里的Accessibility
来源：1-1 react中的组件（1）
weixin_慕圣6334738
2021-07-08 23:02:02
老师你好！
https://reactjs.org/docs/accessibility.html
react官方文档Advanced Guide里的Accessibility里面有如下代码
它说react会将blur 和 focus都bubble给parent来实现， 这是啥意思怎么实现的呢？
还有就是onBlurHandler和onFocusHandler这两个方程里面的我也没看懂， 为什么它的settime 连时间间隔都没放，而且下面的clearTImeout也没明白逻辑
辛苦老师详细解释一下！感谢?
1回答
-
好帮手慕星星
2021-07-09
同学你好，解答如下：
键盘上的tab切换元素的时候会触发focus和blur事件，代码将这两个事件绑定在了div上，也就是按钮的是父元素，包括ul在内，一般会这样写。
代码执行流程：
如果有两个按钮是兄弟元素，button和div是同级
例如刷新页面，按下tab会切换到第一个按钮，触发focus事件，这时this.timeOutId值为null。按下空格，会触发click，isOpen设置为true，显示下拉菜单ul；然后按下tab切换到第二个按钮，这时候会先触发第一个按钮的blur事件，将isOpen设置为false，隐藏下拉菜单；再次按下tab切换到其他地方，一直等重新切换到第一个按钮，触发focus事件，清除上一次的定时器（如果不清除的话，第一个切换到第二个会再次触发blur，定时器会叠加。）
另外定时器不设置时间也可以，就是没有了延迟时间，但仍然是异步的。
大概了解下即可，祝学习愉快！
0
相似问题