Références React : Impossible de lire la propriété 'focus' de null

Question

J'ai cette situation dans mon application : https://codesandbox.io/s/14mq9969j3

Mon objectif est de pouvoir me concentrer sur la saisie à l'intérieur du composant GrandChildInput en cliquant dans le div du composant ChildInput. Cependant, lorsque le composant ChildInput est rendu, la valeur de this.childRef.current est null, et elle le reste jusqu'à ce que je me concentre manuellement sur la saisie en cliquant dedans. Après cela, la valeur de current est assignée.

Vous pouvez suivre cette transformation dans la console. Le log de this.childRef.current apparaît une fois, mais sa valeur change après avoir cliqué sur la saisie pour y mettre le focus manuellement.

Mon objectif final est de faire fonctionner le StyledGrandChildInput de cette manière, mais en étape intermédiaire, j'essaie de faire fonctionner le composant non-stylisé. Je parviens à obtenir ce résultat (avec le composant non-stylisé) dans mon projet local avec :

• React 16.4.2
• Styled-Components 3.4.2

Mais en ce qui concerne le travail dans CodeSandbox avec les versions installées dans le projet via le lien ci-dessus, pour une raison quelconque, même se concentrer sur le composant GrandChildInput non stylisé ne fonctionne pas.

Comment puis-je faire en sorte que l'application se concentre sur le composant GrandChildInput lorsque je clique sur le div de ChildInput ?

Answer 1

Lorsque vous essayez d'attribuer le gestionnaire onClick au div en utilisant la référence, il essaiera d'accéder immédiatement à handleFocus depuis la référence, mais comme il n'est pas encore assigné au composant input. Sa valeur sera null et vous obtiendrez donc cette erreur.

Quant à la valeur imprimée, correctement dans la console, cela a à voir avec la façon dont la console évalue la valeur. Cette réponse fournira plus de détails à ce sujet

Donc, pour résoudre votre problème, ce que vous devez faire est d'appeler la fonction handleFocus en l'enveloppant dans une autre fonction pour qu'elle soit évaluée uniquement au clic comme

 this.childRef.current.handleFocus()}
    style={{ border: "1px solid black", padding: 5 }}
  >
    clique moi

Aussi, si vous vous demandez pourquoi votre méthode n'a pas fonctionné. C'est parce qu'aucune chose n'a provoqué le rappel de la méthode de rendu, de sorte que la bonne fonction a été assignée à onClick après que la référence a été attribuée et est disponible.

CodeSandbox fonctionnel

Answer 2

Pour compléter la réponse de @ShubhamKhatri pour ceux qui ont des difficultés à effectuer la même opération, mais lorsque GrandChildInput est un styled-component et que la version de styled-component est inférieure à 4.

Avec sa mise en œuvre, vous pourriez rencontrer Uncaught TypeError: _this.childRef.current.handleFocus n'est pas une fonction.

Dans ce cas, renommez la propriété ref sur un styled-component en innerRef de cette manière:

 this.childRef.current.handleFocus()}
style={{ border: "1px solid black", padding: 5 }}
>
  Cliquez sur moi