So verwenden Sie Material Tailwind, um ein Dropdown-Menü mit Mehrfachauswahl in React zu implementieren

Question

Ich versuche, ein Dropdown-Menü mit Mehrfachauswahl mithilfe der Komponenten „Tailwind Material Select“ und „Option“ zu erstellen.

Wenn ich jedoch versuche, ein Array als Wert an die Value-Eigenschaft von Select zu übergeben, erhalte ich die folgende Fehlermeldung:

Ungültige Eigenschaft value vom Typ array, bereitgestellt für MaterialTailwind.Select, erwarteter Typ ist ; string

Ich möchte React-Select nicht verwenden, da mein gesamtes Design Tailwind-Material verwendet.

Wenn jemand eine Idee hat, sagen Sie mir bitte, wie man mit Tailwind Material ein Dropdown-Menü mit mehreren Auswahlmöglichkeiten implementiert.

<Auswählen
  className='md:w-72'
  size='lg'
  label='Typ ändern'
  mehrere
  value={selectedOptions}>
  {options.map((o) => {
    return <Option value={o.value}>{o.value}</Option>;
  })}
</Select>

Vielen Dank!

Answer 1

看起来你正在使用的MaterialTailwind.Select组件希望value属性作为单选的字符串。由于你想要使用Tailwind Material实现多选功能，你可能需要以不同的方式处理。

一种方法是将选定的选项作为一个选定值数组来管理在组件的状态中。然后，在渲染选项时，你可以根据selectedOptions数组中的值来有条件地应用selected属性到匹配的选项。

以下是你可能实现这一点的示例：

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;

在这个示例中，handleOptionToggle函数用于在状态数组中切换选定的选项。每个Option组件的selected属性是根据选项的值是否存在于selectedOptions数组中来设置的。

请注意，这种方法可能不完全符合MaterialTailwind.Select组件的确切行为和样式，但它提供了一种使用可用组件实现多选功能的方法。你可能需要调整样式和行为以适应你的项目设计和要求。