Réaction de l'entrée autofocus après activation d'une entrée désactivée

Question

J'essaie d'autofocus d'une entrée de texte (l'entrée est activée lors de la sélection d'une option radio appropriée).

La mise au point automatique fonctionne lorsque vous basculez entre les options qui permettent la saisie de texte. Toutefois, l'autofocus échoue lors du passage d'une option qui désactive la saisie de texte à une option qui active la saisie de texte.

• Dans la liaison de l'échantillon ci-dessous:

  • l'option 1, option 2: désactiver l'entrée de texte
  • option 3, option 4: permettre la saisie

• Défaut case:

  • option 1 i s par défaut
  • choisissez l'option 3 ou option 4
  • entrée obtient activé
  • autofocus ne fonctionne pas (recherche de pointeur pour corriger ce comportement)

• Succès cas:

  • choisir l'option 3
  • entrée activée
  • passer à l'option 4
  • entrée est autoFocussed

sample code for the problem on codesandbox

Answer 1

Cela ne fonctionne pas, parce que vous définissez immédiatement après l'appel setState, mais à ce stade de cycle de vie du composant n'a pas re-rendu et la ref à l'entrée est toujours dans un état où il est désactivé.

Ce que vous devez faire est de déclencher la gestion du focus après la mise à jour du composant dans le hook componentDidUpdate.

Quelque chose comme ceci (code pseudo)

componentDidUpdate(prevProps, prevState) { 

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

Il est possible que vous avez besoin des contrôles supplémentaires comme se concentrer uniquement sur une transition de désactivé à activé. Cela pourrait se faire en faisant quelque chose comme ceci:

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

Voici un lien vers la codesandbox mise à jour: https://codesandbox.io/s/31RnlkJW4

Answer 2

Juste un peu plus à ajouter, autoFocus ne fonctionne que sur le premier rendu de l'élément (essentiellement seulement lorsque componentDidMount s'exécute). C'est pourquoi la mise au point ne se fait pas automatiquement lorsque vous réactivez l'entrée, elle n'est pas démontée, puis remontée. Pour que autoFocus fonctionne, vous devez déplacer l'entrée et l'entrée désactivées dans des composants séparés et les restituer conditionnellement en fonction de l'état.