Question

我有一个Code Sandbox here演示了我想做的事情。

当用户按下按钮时，将显示文本输入并给予焦点。

为此，我使用了ref并将焦点对准了它：

  //When user clicks button, show input
  const handleClick = useCallback(() => {
    setShowInput(true);
  }, []);  

  useEffect(() => {
    if (showInput && inputRef.current) {
      inputRef.current.focus();
    }
  }, [showInput]);

当用户标签超出文本字段时，我希望焦点重新回到该按钮上。

在这里的代码中，我也通过使用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();
    }
  }, []);

但是，问题是，如果用户改为使用鼠标单击“说”另一个按钮，那么焦点仍然集中在触发按钮上。

我想做的就是为这些组件定义一些制表符顺序，即：

TextField =>触发按钮=>其他按钮

但是，我不想将选项卡索引硬编码到我的组件中，因为这可能对整个应用程序不起作用？

是否有一个优雅的反应解决方案？

Answer 1

这里最好的答案是，如果希望选项卡顺序为TextField =>触发按钮=>其他按钮，则按该顺序呈现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>

反应组件中的Tab键顺序？

1 个答案: