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
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Nampaknya anda menggunakan atribut
MaterialTailwind.Select组件希望valuesebagai 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 ( ); }; export default MyMultiSelect;Dalam contoh ini,
handleOptionToggle函数用于在状态数组中切换选定的选项。每个Option组件的selected属性是根据选项的值是否存在于selectedOptionsditetapkan 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.