Comment utiliser Material Tailwind pour implémenter le menu déroulant à sélection multiple dans React

Question

J'essaie de créer un menu déroulant à sélection multiple à l'aide des composants Tailwind Material Select et Option.

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 :

Propriété value non valide, de type array, fournie à MaterialTailwind.Select, le type attendu est chaîne

Je ne souhaite pas utiliser React-Select car ma conception globale utilise Tailwind Material.

Si quelqu'un a une idée, dites-moi comment implémenter un menu déroulant à sélection multiple avec Tailwind Material.

  {options.map((o) => {
    return {o.value};
  })}

Merci ! 

Answer 1

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.