React中使用Material Tailwind實作多選下拉選單的方法
P粉633733146
P粉633733146 2023-09-06 09:29:26
0
1
524
<p>我正在嘗試使用Tailwind Material Select和Option元件建立多選下拉式選單。 </p> <p>但是,每當我嘗試將陣列作為值傳遞給Select的value屬性時,會出現以下錯誤:</p> <p>無效的屬性<code>value</code>,類型為<code>array</code>,提供給<code>MaterialTailwind.Select</code>,預期的類型是<MaterialTailwind.Select</code> ;string</code></p> <p>我不想使用react-select,因為我整體設計都是使用Tailwind Material的。 </p> <p>如果有人有想法,請告訴我如何用Tailwind Material實作多選下拉選單。 </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>謝謝! </p>
P粉633733146
P粉633733146

全部回覆(1)
P粉615829742

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!