2

ここには、やりたいことを示すコード サンドボックスがあります。

ユーザーがボタンを押すと、テキスト入力が表示され、フォーカスが与えられます。

これを行うには、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 => トリガー ボタン => その他のボタン

ただし、タブ インデックスをコンポーネントにハード コードしたくありません。アプリケーション全体でうまく機能しない可能性があるためです。

これに対するエレガントな反応ソリューションはありますか?

4

2 に答える 2

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>

于 2019-11-02T06:53:20.737 に答える