Cara menggunakan Material Tailwind untuk melaksanakan menu lungsur turun berbilang pilihan dalam React

Question

Saya cuba membina menu lungsur turun berbilang pilihan menggunakan komponen Tailwind Material Select dan Option.

Walau bagaimanapun, apabila saya cuba menghantar tatasusunan sebagai nilai kepada sifat nilai Select, saya mendapat ralat berikut:

Harta nilai jenis tatasusunan, diberikan kepada MaterialTailwind.Select, jenis yang dijangkakan ialah /kod>

Saya tidak mahu menggunakan react-select kerana reka bentuk keseluruhan saya menggunakan Bahan Tailwind.

Jika sesiapa mempunyai idea, sila beritahu saya cara melaksanakan menu lungsur turun berbilang pilihan dengan Bahan Tailwind.

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

Terima kasih! 

Answer 1

Nampaknya anda menggunakan atribut MaterialTailwind.Select组件希望value sebagai rentetan untuk pemilihan radio. Memandangkan anda ingin melaksanakan fungsi berbilang pilihan menggunakan Bahan Tailwind, anda mungkin perlu mengendalikannya secara berbeza.

Salah satu cara ialah mengurus pilihan yang dipilih sebagai tatasusunan nilai terpilih dalam keadaan komponen. Kemudian, apabila memberikan pilihan, anda boleh memadankan pilihan berdasarkan atribut selectedOptions数组中的值来有条件地应用selected.

Berikut ialah contoh cara anda boleh mencapai ini:

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;

Dalam contoh ini, handleOptionToggle函数用于在状态数组中切换选定的选项。每个Option组件的selected属性是根据选项的值是否存在于selectedOptions ditetapkan dalam tatasusunan.

Sila ambil perhatian bahawa pendekatan ini mungkin tidak sepadan dengan gelagat dan penggayaan yang tepat bagi komponen MaterialTailwind.Select, tetapi ia menyediakan cara untuk melaksanakan fungsi berbilang pilihan menggunakan komponen yang tersedia. Anda mungkin perlu melaraskan gaya dan tingkah laku agar sesuai dengan reka bentuk dan keperluan projek anda.