React中使用Material Tailwind實作多選下拉選單的方法

Question

我正在嘗試使用Tailwind Material Select和Option元件建立多選下拉式選單。

但是，每當我嘗試將陣列作為值傳遞給Select的value屬性時，會出現以下錯誤：

無效的屬性value，類型為array，提供給MaterialTailwind.Select，預期的類型是 ;string

我不想使用react-select，因為我整體設計都是使用Tailwind Material的。

如果有人有想法，請告訴我如何用Tailwind Material實作多選下拉選單。

<Select
  className='md:w-72'
  size='lg'
  label='Change Type'
  multiple
  value={selectedOptions}>
  {options.map((o) => {
    return <Option value={o.value}>{o.value}</Option>;
  })}
</Select>

謝謝！

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元件的確切行為和樣式，但它提供了使用可用元件實作多重選擇功能的方法。你可能需要調整樣式和行為以適應你的專案設計和要求。