<Select components={{ Option }} isMulti closeMenuOnSelect={false} hideSelectedOptions={false} options={options} />
4 Réponses :
Je soupçonne que cela a à voir avec l'accessoire hideSelectedOptions que vous passez dans le composant Select ici:
J'essaierais de le définir sur true (ou de le supprimer) et de voir si cela résout votre problème.
J'ai vu votre autre commentaire @rajesh avant que vous ne le supprimiez. Je ne pense pas que ce soit propice à aider les gens quand on saute dans la gorge des gens quand ils essaient d'aider. Votre réponse ci-dessus a été envoyée environ 15 secondes après que j'ai publié le message, puis le suivi que vous avez supprimé m'a accusé de manquer le point du message alors que vous n'aviez pas vérifié si la solution résoudrait le problème. Veuillez passer plus de temps à essayer d'aider et moins de temps à essayer de contrôler les gens, c'est dommageable pour la communauté.
Cher ami, je ne suis personne pour accuser / sauter à la gorge des gens . Oui, j'ai supprimé mon commentaire mais c'est parce que j'ai réalisé que c'était moi qui me trompais. Concernant les commentaires des policiers , quelqu'un doit surveiller les activités. Et comme SO est le portail des utilisateurs, les utilisateurs devront le faire. Je ne décourage pas les gens, mais en même temps, j'essaie de minimiser les tétées à la cuillère et les choses redondantes. Bientôt, vous serez récompensé par des privilèges et il est attendu de vous que vous soyez également strict. Cela gardera notre communauté propre
Je ne suis pas d'accord, vous m'avez découragé. Je ne vois pas comment quiconque n'a même pas 30 secondes pour corriger son message ne serait pas découragé non plus. Il est bien sûr utile de s'assurer que les réponses répondent à un certain niveau de qualité, mais je pense que nous ne sommes pas d'accord sur ce que cela signifie. Laissons-le là.
Merci pour la réponse @ollie, mais je crois que je ne suis pas en mesure de cadrer ma question correctement, je ne veux pas que l'option sélectionnée s'affiche dans la barre de saisie, même après avoir sélectionné l'option dans la liste déroulante, mon espace réservé doit rester tel quel et l'option sélectionnée ne devrait pas y être affiché.
@YashChauhan ah ok, pourriez-vous mettre à jour la question avec le code de la barre de saisie - il semble que le composant que vous avez fourni ne concerne que les éléments de la liste déroulante car je ne vois pas de champ de saisie (uniquement les cases à cocher ). L'idée sera similaire - vous voulez filtrer la liste affichée si elles ne sont pas sélectionnées
J'ai parcouru la documentation de React-Select mais je n'ai pas pu trouver les accessoires qui sont responsables de l'ajout de l'option sélectionnée dans la barre d'entrée de recherche.
Est-ce cette option que vous transmettez hideSelectedOptions = {false} ? Il semble décrire le comportement que vous avez actuellement.
Vous pouvez simplement afficher vos options uniquement si leur isSelected est faux, et dans l'autre cas, envoyer un div vide en utilisant une condition ternaire:
const Option = props => {
return !props.isSelected ?
<div>
<components.Option {...props}>
<input type="checkbox" checked={props.isSelected} onChange={() => null} />
<label>{props.value}</label>
</components.Option>
</div>
:
<div/>
};
Vous devrez retourner un nœud JSX dans tous les cas, renvoyer null (ou un équivalent) générera un avertissement / erreur.
Merci pour la réponse @Treycos, mais je pense que je ne suis pas en mesure de cadrer correctement ma question, je ne veux pas que l'option sélectionnée s'affiche dans la barre de saisie, même après avoir sélectionné l'option dans la liste déroulante, mon espace réservé doit rester tel quel, et l'option sélectionnée ne devrait pas y être affiché.
@YashChauhan avez-vous la solution, j'ai la même question
Une option consiste à définir le composant personnalisé avec un div vide
const MultiValueContainer = props => {
return (
<div></div>
);
};
class PriceFilter extends React.Component {
constructor(props) {
super(props);
}
render() {
return [
<Select
isMulti
components={{ MultiValueContainer }}
options={this.props.options}
className="basic-multi-select"
classNamePrefix="select"
hideSelectedOptions={false}
closeMenuOnSelect={false}
/>
];
}
}
il y a un nouvel accessoire controlShouldRenderValue = {false} alors il n'affichera pas l'option sélectionnée dans la barre de saisie, même après avoir sélectionné l'option dans la liste déroulante comme mentionné ci-dessous
<Select
components={{ Option }}
isMulti closeMenuOnSelect={false}
hideSelectedOptions={false}
controlShouldRenderValue = { false }
options={options} />
Donc, dans le champ de recherche, il affichera un espace réservé
Vous devrez filtrer manuellement les valeurs sélectionnées et afficher le reste