J'ai un composant de sélection réagissant pour préformer la recherche sur une API et un bouton pour lancer la recherche.
J'ai essayé de définir Menuisopen = {true} après le bouton Cliquez, mais il ruine le comportement de flou de Focus original Le menu ne ferme plus sur Flou. essayé de définir .Focus () sur l'entrée, il n'a pas ouvert le menu.
Menu de comportement original actuel s'ouvre sur la mise au point et la fermeture de flou, je veux garder cela plus je souhaite ouvrir le menu après que je clique sur le bouton.
3 Réponses :
Pour réaliser ce que vous voulez, vous devrez utiliser un Je pense que le moyen le plus simple de conserver toute la fonctionnalité native de ici a Exemple en direct . MenuSopen contrôlé (code> des accessoires . réacte-sélection est d'utiliser une combinaison des accessoires oninputChange et oncocus comme le code suivant:
@ Titan9389 J'ai mis à jour mon code pour ajouter quelques ref et axé le menu lorsque vous cliquez sur le bouton
Merci je l'ai déjà fait moi-même c'est pourquoi a supprimé le commentaire, merci de toute façon.
Vous devez this.refs.blur () aussi sur OnInphatChange Fermer
Dans votre exemple et votre démonstration en direct, le comportement par défaut du menu d'ouverture et de fermeture directe avec le Select ne fonctionne plus
Fonctionne parfaitement sur mon côté
J'utilise cette fonction dans réagir, pour ne pas ouvrir qu'un seul onglet, de sorte que vous ouvrez un autre, précédent sera fermé.
Si vous voulez préserver le comportement de mise au point, vous devriez faire quelque chose comme ça
Ajoutez une référence sur le constructeur Ajoutez cette méthode de fermeture p> et sur le composant SELECT P> <Select
closeMenuOnSelect={props.closeMenuOnSelect || true}
openMenuOnClick={() => this.setState({ open: true })}
onFocus={() => this.setState({ open: true })}
onBlur={() => this.setState({ open: false })}
menuIsOpen={this.state.open}
onInputChange={() => {
if (props.closeMenuOnSelect) {
this.close();
}
}}
ref={this.selectRef}
>
</Select>