ReactJS: Comment-pour définir le focus d'entrée de l'élément lorsqu'il entre dans les DOM?
Comment définir le focus à un input
élément lorsqu'il entre dans les DOM?
Scénario
Lorsqu'un bouton est cliqué sur l'élément d'entrée est affichée. Comment définir le focus à cet élément?
Code-Extrait
class Component extends React.Component{
constructor(props) {
super(props);
this.state = {
showInput: false
}
}
render() {
return (
<div>
<div onClick={() => {
this.setState({showInput: true});
ReactDOM.findDOMNode(this.refs.myInput).focus() //<- NOT WORKING
}}>
Show Input
</div>
{
(this.state.showInput) ? (
<input
type="text"
ref="myInput"
/>
) : ""
}
</div>
);
}
}
Appel ReactDOM.findDOMNode(this.refs.myInput).focus()
après le changement d'état ne fonctionne pas. Aussi de changer juste le style
ou type
bien sur changement d'état ne fonctionne pas.
Vous devez vous connecter pour publier un commentaire.
Dans le
componentDidMount
etcomponentDidUpdate
crochets de le faire:componentDidUpdate
a fait le travail! J'ai ajouté le code suivant:componentDidUpdate() { if (ReactDOM.findDOMNode(this.refs.searchInput) !== null) { ReactDOM.findDOMNode(this.refs.searchInput).focus() } }
this.refs.myInput.focus()
au lieu defindDOMNode
. Merci pour ce commentaire si!autoFocus
à l'intérieur de la balise d'entréeEn supposant que vous avez seulement besoin d'une visible d'entrée sur la page à un moment d'avoir l'autofocus Poh Zi Comment suggestion de l'utilisation de la
autofocus
est probablement le plus simple.<input type="text" autofocus/>
devrait faire l'affaire, pas de JS nécessaire!
vous devez utiliser ref
et utiliser ce code pour se concentrer
De la documentation:
"findDOMNode ne fonctionne que sur des composants montés (qui est, les composants qui ont été placés dans les DOM). Si vous essayez d'appeler ce sur un composant qui n'a pas été monté encore (comme appeler findDOMNode() dans render() sur un composant qui n'a pas encore créé) une exception sera levée."
Comme mentionné par Piyush.kapoor, vous devez le placer que dans
componentDidMount
et/oucomponentDidUpdate
.Je devais définir la variable comme
HTMLInputElement
1er...Puis ajouter ceci dans le contrôle:
ALORS je pourrais obtenir ce à construire/travail: