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组件的确切行为和样式，但它提供了一种使用可用组件实现多选功能的方法。你可能需要调整样式和行为以适应你的项目设计和要求。