J'essaie d'autofocus un élément d'entrée sur l'ouverture d'une popover. Voici le sandbox pour celui-ci: HTTPS: // Codesandbox. io / s / green-bash-x6bj4? File = / src / app.js
problème ici est que la propriété actuelle est toujours nulle sur REF. Est-ce un cas où le transparent pourrait aider? Je ne suis pas très conscient de cela, alors postez-le.
Toute aide est très appréciée.
3 Réponses :
Pas besoin d'utiliser une référence pour cela, il suffit d'ajouter une autofocasse à votre entrée:
<input autoFocus placeholder="search" />
Cela fonctionne lorsque je le fais sur votre codesandbox. Assurez-vous de taper la mise au point automatique correctement (F est majuscule)
Cela fonctionne réellement. Parfois, nous ignorons les trucs mineurs et surchargent des choses. Merci mon pote.
Puisque vous contrôlez le Vous pouvez ajouter une asynchronisation / attendre au Ouvrir code> via Etat, qui est asynchronisé, lorsque le INPUTREF code> tente d'obtenir l'élément, l'état n'a pas été mis à jour et le Bon code> Les enfants n'ont pas été créés. setState code> pour le faire fonctionner. P> const handleClick = async event => {
await setAnchorEl(event.currentTarget);
inputRef.current.focus();
};
Belle façon de l'approcher. + 1
@Aakashthakur, je corrige simplement la faute à l'intérieur du code et s'il y a d'autres outils comme celui-ci, remarquez ce type de problème aiderait à deviner
Vous pouvez simplement ajouter un rappel après l'instate, comme ceci:
this.setState(
{
anchorEl: e.currentTarget,
isPopoverOpen: true,
},
() => {
setTimeout(() => {
if (this.inputRef.current) {
return this.inputRef.current.focus();
}
return null;
}, 200);
}
);
};
On dirait que le contenu de
POPOVER n'est pas monté, ce qui signifie que lehandleclickComme Adam a dit, vous aurez déplacer votre
.focus () appelle à une fois que le bouton a été cliqué, probablement dans unuseeffect ou quelque chose. L'élément d'entrée est attribué à la réferée après sa clic, vous ne pouvez donc pas vous concentrer avant que la pondérale ne soit ouverte.