React中使用Material Tailwind实现多选下拉菜单的方法
P粉633733146
P粉633733146 2023-09-06 09:29:26
0
1
357
<p>我正在尝试使用Tailwind Material Select和Option组件构建多选下拉菜单。</p> <p>但是,每当我尝试将数组作为值传递给Select的value属性时,会出现以下错误:</p> <p>无效的属性<code>value</code>,类型为<code>array</code>,提供给<code>MaterialTailwind.Select</code>,期望的类型是<code>string</code></p> <p>我不想使用react-select,因为我整体设计都是使用Tailwind Material的。</p> <p>如果有人有想法,请告诉我如何用Tailwind Material实现多选下拉菜单。</p> <pre class="brush:php;toolbar:false;">&lt;Select className='md:w-72' size='lg' label='Change Type' multiple value={selectedOptions}&gt; {options.map((o) =&gt; { return &lt;Option value={o.value}&gt;{o.value}&lt;/Option&gt;; })} &lt;/Select&gt;</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 학습자의 빠른 성장을 도와주세요!