Comment utiliser Material Tailwind pour implémenter le menu déroulant à sélection multiple dans React
P粉633733146
P粉633733146 2023-09-06 09:29:26
0
1
610
<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>
P粉633733146
P粉633733146

répondre à tous(1)
P粉615829742

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 :

import React, { useState } from 'react';
import { Select, Option } from '@material-tailwind/react';

const MyMultiSelect = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);
  
  const options = [
    { value: '选项1' },
    { value: '选项2' },
    { value: '选项3' },
    // ... 其他选项
  ];

  const handleOptionToggle = (optionValue) => {
    if (selectedOptions.includes(optionValue)) {
      setSelectedOptions(selectedOptions.filter(val => val !== optionValue));
    } else {
      setSelectedOptions([...selectedOptions, optionValue]);
    }
  };

  return (
    <Select
      className='md:w-72'
      size='lg'
      label='更改类型'
      multiple
    >
      {options.map((o) => (
        <Option
          key={o.value}
          value={o.value}
          selected={selectedOptions.includes(o.value)}
          onClick={() => handleOptionToggle(o.value)}
        >
          {o.value}
        </Option>
      ))}
    </Select>
  );
};

export default MyMultiSelect;

Dans cet exemple, handleOptionToggle函数用于在状态数组中切换选定的选项。每个Option组件的selected属性是根据选项的值是否存在于selectedOptionsest 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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal