另一页

React焦点管理

最普通的场景

设置元素的ref,获取引用,调用focus()方法

在不同层级的组件间管理

父组件需要获得子组件的引用,需要传给子组件回调,让父组件能够获得引用。

有列表的场景

一种方法是将所有子组件的ref传给父组件,这样需要一个ref数组。由于数组可能动态变化,不能用useRef hook,只能在class组件内实现。数组变化更新ref。

也可以只创建一个ReactRef。渲染列表时,会被聚焦的那一项被赋予ref,由父组件管理这个引用。

更新状态后如何处理按钮事件

我想实现一个需求:编辑框聚焦时按钮显示“完成”,编辑框失焦时显示“新任务”。看起来很好实现,但面临尴尬的问题:当我点击“完成”时,编辑框已经失焦,其实此时应该显示“新任务”了。所以,真实的逻辑应该加上:如果失焦时按钮没有被点击,那么显示“新任务”,如果因为按钮被聚焦而导致编辑框失焦,那么应该显示“完成”直到鼠标松开。

沿着这个思路非常绕,我想了很久都不知道如何处理。稍微理了一下,决定按钮是否显示的条件,不只有编辑框是否聚集,还有“刚才编辑框是否聚焦”。怎么理解“刚才”呢?难道要通过时间来设计逻辑吗?

我想还是要借助一下时间的逻辑。即blur事件触发后,状态在一定时间后变为false,如果按下的是按钮,则终止这个过程,由按钮变更状态。

如何理解一定时间?它可以是较短的时间。但设想一下,即便是50ms,也意味着在50ms内焦点变化没有任何响应。如果50ms内再次聚焦,问题就大了,因为在focus时触发的状态变化其实被丢弃了,这个概念有点类似数据库的丢失修改。会导致即使处于编辑状态,状态也为“非编辑”。

尽管50ms内失焦再聚焦的概率比较小,我们仍然需要考虑,有没有更好的方案?时间维度上,0ms是最好的,逻辑维度上,Blur事件、Focus事件后立即检查是最好的。其实可以做到,只是我们不能为每个元素都绑定Focus,我们需要在Blur里设置Focus后才能执行的操作。了解过JS异步机制就会知道,点击按钮导致焦点转移,这个过程先运行Blur再运行Focus,但两个操作都被放进了异步队列中,如果我们在Blur中设置setTimeout(()=>{},0),最后的执行顺序是Blur-Focus-setTimeout。我们实现了Focus后立即执行一些操作,却不必为所有元素绑定focus。

剩下的问题是如何判断Focus的元素。这一点DOM提供了activeElement的API,我们只需要为按钮添加某个独特的DOM属性,用于判断就好了。

最后我们整理一下。编辑框聚焦时状态变为Editing,焦点转移时触发编辑框的Blur,然后触发activeEleemnt的Focus,之后执行Blur添加的异步操作,依据activeElement判断状态是否置为NonEditing。如果activeElement是按钮,则不改变状态,等按钮Click触发后再改变。

补充:为什么要这样做?如果不对按钮的Click做特殊处理,那么点按钮的时候“完成”立即变成“新任务”,导致触发的onClick事件不符合预期。