問題タブ [react-ref]

ref の使用方法に関する React のドキュメントを見た後、ref が設定されて DOM ノードにリンクされると、たとえば、DOM ノードをリロードするように指示されます (私の場合は HMTL5 ビデオ タグを使用する場合)。this.videoRef.current.load()単に行うのではなく、たとえば行うことthis.videoRef.load()。この現在のプロパティが何を/何を表しているのか、そしてなぜそれが必要なのか、誰かが知っていますか? 両方のケースを試した後、私のコードは前者でのみ機能します。

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

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

これを行うには、ref を使用してフォーカスを与えます。これで問題ありません。

ユーザーがテキスト フィールドからタブで移動したときに、フォーカスをそのボタンに戻す必要があります。

ここにあるコードでは、ref を使用してボタンにフォーカスを与えることでこれを実現しています。

ただし、問題は、ユーザーが代わりにマウスを使用して別のボタンをクリックすると、トリガー ボタンにフォーカスが移ったままになることです。

私ができるようにしたいのは、これらのコンポーネントのタブ オーダーを次のように定義することです。

TextField => トリガー ボタン => その他のボタン

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

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

TLDR - 参照を使用してサブコンポーネントの色を変更する方法を理解するのに助けが必要です。

サブコンポーネントの背景色の変化を props と refs の両方と比較するという簡単な例を使って、React refs についてもう少し勉強しようとしています。これは実際のベスト プラクティスではないことは承知していますが、おもちゃの例としては、孤立した良い演習のように思えました。

App.js ファイルで myRef.current.style = { backgroundColor: 'green' } (またはその効果のあるもの) を呼び出せるようにしたいのですが、呼び出そうとすると myRef.current が null のようですそれ。

コンソール ログを取得すると {current : null} が表示されますが、展開するとコンポーネント データが存在します。これは、compomentDidMount の後に myRef.current が消去されるためかもしれませんが、ここからどこに行けばよいかわかりません。

この例を完成させたい場合、どうするのが最善の方法でしょうか? 理想的には、コメントアウトした行などを呼び出せるようにしたいなと思っています。

コード - https://github.com/ericadohring/ReactRef