Réagissez, concentrez un élément dans React lorsqu'il est ajouté au DOM

Comment focaliser un élément dans React dès qu'il est ajouté au DOM`

J'avais un modal avec un formulaire simple, avec juste uninputdans le champ, et je voulais mettre cet élément en évidence dès que le modal a été ajouté au DOM par React.

J'ai commencé à réfléchir à de nombreuses façons différentes de le faire, peut-être en utilisantuseEffect()pour déclencher un événement lorsque le composant a été ajouté au DOM, ou en utilisant lerefprop pour créer une référence à l'élément DOM et appeler sonfocus()méthode, mais j'ai réalisé que je pensais trop compliqué et que j'utilisais simplement leautofocusL'attribut HTML sur l'élément pourrait fonctionner.

Et ça l'a fait. Rappelez-vous que c'estautoFocusen JSX, avec la capitaleF:

<input
  autoFocus
  ...// rest of the input field attributes

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: