反应组件中的标签顺序?
Posted
技术标签:
【中文标题】反应组件中的标签顺序?【英文标题】:Tab order in react components? 【发布时间】:2020-02-26 08:17:04 【问题描述】:我有一个Code Sandbox here,它展示了我想要做什么。
当用户按下按钮时,会显示文本输入并获得焦点。
为此,我使用了一个 ref 并赋予它焦点,这很好:
//When user clicks button, show input
const handleClick = useCallback(() =>
setShowInput(true);
, []);
useEffect(() =>
if (showInput && inputRef.current)
inputRef.current.focus();
, [showInput]);
当用户 tabs 离开文本字段时,我希望焦点回到那个按钮上。
在我在这里的代码中,我也通过使用 ref 并将焦点放在按钮上来实现这一点。
//When user exits input, unshow input
//Also, need to tab to button if it was a tab button press.
const handleInputBlur = useCallback(() =>
setShowInput(false);
if (buttonRef.current)
buttonRef.current.focus();
, []);
然而,问题是如果用户使用他们的鼠标点击另一个按钮,那么焦点仍然被赋予触发按钮。
我想做的是为这些组件定义一些 Tab 键顺序,即:
TextField => 触发按钮 => 其他按钮
但是,我不想将标签索引硬编码到我的组件中,因为这可能无法很好地与整个应用程序配合使用?
是否有一个优雅的反应解决方案?
【问题讨论】:
不幸的是,除了使用tabIndex
属性或像您一样手动处理焦点之外,我认为没有其他方法可以控制您的标签顺序。也就是说,我不得不怀疑尝试以这种方式控制标签顺序是否是最好的主意,因为它与元素的自然流动相反。如果有人执行了一个点击/选项卡,他们希望将他们带到页面的下方并且焦点朝相反的方向移动,这可能会令人困惑。 Shift + Tab 专门用于允许用户在需要时向后导航。
【参考方案1】:
这里的最佳答案是,如果您希望标签顺序为 TextField => Trigger Button => Other Button,则按该顺序呈现 html。
然后您可以使用 CSS 更改视觉顺序。
.container
display: flex;
border: solid 1px black;
button
margin: 1em;
padding: 1em;
.order-1
order: 1;
.order-2
order: 2;
.order-3
order: 3;
.order-4
order: 4;
<div class = "container">
<button class ="order-4"> 1</button>
<button class = "order-2"> 2</button>
<button class = "order-3"> 3</button>
<button class ="order-1"> 4</button>
</div>
【讨论】:
【参考方案2】:我喜欢 dwjohnston 的简单回答。如果需要更复杂的东西,我们可以考虑使用react-tabindex 插件。
useTabIndex 返回一个值以传递给元素上的 tabIndex 属性 您的选择。如果包裹在一个活跃的祖先中,那 tabIndex 值会自动设置为 -1,使得元素 不可选项。
$ npm install react-tabindex
import useTabIndex from 'react-tabindex';
function ExampleButton()
const tabIndex = useTabIndex();
return <button tabIndex=tabIndex>Click here!</button>;
【讨论】:
以上是关于反应组件中的标签顺序?的主要内容,如果未能解决你的问题,请参考以下文章