Comment utiliser Material Tailwind pour implémenter le menu déroulant à sélection multiple dans React
P粉633733146
2023-09-06 09:29:26
<p>J'essaie de créer un menu déroulant à sélection multiple à l'aide des composants Tailwind Material Select et Option. </p>
<p>Cependant, chaque fois que j'essaie de transmettre un tableau en tant que valeur à la propriété value de Select, j'obtiens l'erreur suivante : </p>
<p>Propriété <code>value</code> non valide, de type <code>array</code>, fournie à <code>MaterialTailwind.Select</code>, le type attendu est <code> chaîne</code></p>
<p>Je ne souhaite pas utiliser React-Select car ma conception globale utilise Tailwind Material. </p>
<p>Si quelqu'un a une idée, dites-moi comment implémenter un menu déroulant à sélection multiple avec Tailwind Material. </p>
<pre class="brush:php;toolbar:false;"><Sélectionner
nom de classe='md:w-72'
taille='lg'
label='Changer le type'
plusieurs
value={selectedOptions}>
{options.map((o) => {
return <Option value={o.value}>{o.value}</Option>;
})}
</Sélectionner></pré>
<p>Merci ! </p>
On dirait que vous utilisez l'attribut
MaterialTailwind.Select
组件希望value
comme chaîne pour la sélection radio. Puisque vous souhaitez implémenter la fonctionnalité de sélection multiple à l’aide de Tailwind Material, vous devrez peut-être la gérer différemment.Une solution consiste à gérer les options sélectionnées sous la forme d'un tableau de valeurs sélectionnées dans l'état du composant. Ensuite, lors du rendu des options, vous pouvez faire correspondre les options en fonction de l'attribut
selectedOptions
数组中的值来有条件地应用selected
.Voici un exemple de la façon dont vous pourriez y parvenir :
Dans cet exemple,
handleOptionToggle
函数用于在状态数组中切换选定的选项。每个Option
组件的selected
属性是根据选项的值是否存在于selectedOptions
est défini dans un tableau.Veuillez noter que cette approche peut ne pas correspondre exactement au comportement et au style exacts du composant
MaterialTailwind.Select
, mais elle fournit un moyen d'implémenter la fonctionnalité de sélection multiple en utilisant les composants disponibles. Vous devrez peut-être ajuster le style et le comportement en fonction de la conception et des exigences de votre projet.