Comment définir la mise au point sur un élément d'entrée lorsqu'il entre dans le DOM?
Lorsqu'un bouton d'entrée est affiché. Comment définir la mise au point sur cet élément?
appelant réacteur.finddomnode (this.refs.myinput) .FOCUS () après que l'état change ne fonctionne pas. Modifiant également simplement le type ou type La propriété sur l'état de l'état ne fonctionne pas.
5 Réponses :
dans le composant ComponentDidMount et ComponentDidUpdate Crochets Faites ceci:
Merci beaucoup cela a travaillé! Pour ce cas, le composant ComposantDidUpdate a fait le travail! J'ai ajouté le code suivant: composantDidUpdate () {if (réactdom.finddomnode (this.refs.searchInput)! == NULL) {réactifdomnodeddomnode (this.refs.searchInput) .FOCUS ()}}
Un bon commentaire, qui a été supprimé malheureusement, suggère également d'utiliser this.refs.myinput.focus () au lieu de westromnode . Merci pour le ce commentaire cependant!
Oui n'utilisez pas ReactDom.find Node qui est obsolète, il a glissé mon esprit cela.refs.input.focus ()
ou en fait, vous pouvez simplement utiliser autofocus à l'intérieur de la balise d'entrée
Vous devez utiliser réf et utiliser ce code pour la mise au point
de la DOCS:
"FindDomnode ne fonctionne que sur les composants montés (c'est-à-dire des composants qui ont été placés dans le DOM). Si vous essayez d'appeler ceci sur un composant qui n'a pas encore été monté (comme appel à appelerdomnode () dans le rendu () sur un composant qui doit encore être créé) une exception sera lancée. "
Comme mentionné par piyush.kapoor, vous devez placer cela dans composentDidDmount et / ou composantDidUpdate . .
En supposant que vous n'avez besoin que d'une entrée visible sur la page à la fois pour avoir Autofocus POH ZI Comment est suggestion d'utiliser le devrait faire l'affaire, pas de JS nécessaire! autofocus est probablement le plus simple.
c'est bien! Merci
Dans JSX, Attribut Camelcase:
Je devais définir la variable comme puis ajouter ceci dans la commande: Puis je pourrais obtenir cela pour construire / travailler: htmlinductelement 1st ...