無効な入力を有効にした後にオートフォーカス入力に反応します

Question

テキスト入力にオートフォーカスしようとしています（入力は関連するラジオオプションを選択すると有効になります）。

オートフォーカスは、テキスト入力を有効にするオプションを切り替えるときに機能します。ただし、テキスト入力を無効にするオプションからテキスト入力を有効にするオプションに切り替えると、オートフォーカスが失敗します。

• オプション1、オプション2：テキスト入力を無効
• オプション3、オプション4：テキスト入力を有効

障害以下のサンプルリンクで

• ケース：

  • オプション1 i
    • は、オプション3を選択します。■デフォルト
    • は、入力は、オートフォーカスが失敗した
    • が

  • 成功事例を（この動作を修正するためにポインタを探して）有効になります4

  • オプション3またはオプションを選択してください
  • 入力が有効です
  • オプション4に切り替える
  • すぐSETSTATEコールの後に設定されますが、ライフサイクルのこの時点でコンポーネントが再レンダリングされていませんし、原因の入力が、これは動作しません

sample code for the problem on codesandbox

Answer 1

をautoFocussedされます入力に対するrefはまだ無効になっている状態です。

あなたが行う必要があるのは、componentDidUpdateフックでコンポーネントが更新された後にフォーカス処理をトリガすることです。このような

サムシング（擬似コード）

componentDidUpdate(prevProps, prevState) { 

    if (this.state.enabled) { 
    this.inputValue.focus(); 
    } 
} 

あなただけのような追加のチェックが無効から有効への移行に焦点を当てる必要があることが可能かもしれません。これは、このような何かを行うことによって達成することができ：

componentDidUpdate(prevProps, prevState) { 
    if (!prevState.enabled && this.state.enabled) { 
    this.inputValue.focus(); 
    }} 

ここで更新codesandboxへのリンク：https://codesandbox.io/s/31RnlkJW4

Answer 2

追加するだけで少し余分な、autoFocusのみ基本的にのみ（要素のレンダリング初期に取り組んでいますcomponentDidMountが実行されたとき）。つまり、入力を再度有効にしたときに自動的に焦点を合わせるのではなく、マウントが解除されずに再度マウントされるからです。 autoFocusを機能させるには、入力と無効化された入力を別々のコンポーネントに移動し、状態に基づいて条件付きでレンダリングする必要があります。