简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Material Tailwind를 사용하여 React에서 다중 선택 드롭다운 메뉴를 구현하는 방법
P粉633733146
P粉633733146 2023-09-06 09:29:26
0
1
472

Tailwind Material Select 및 Option 구성요소를 사용하여 다중 선택 드롭다운 메뉴를 만들려고 합니다.

그러나 배열을 Select의 값 속성에 값으로 전달하려고 할 때마다 다음 오류가 발생합니다.

MaterialTailwind.Select에 제공된 array 유형의 잘못된 속성 value 예상 유형은 string< /코드>

내 전체 디자인이 Tailwind Material을 사용하기 때문에 반응 선택을 사용하고 싶지 않습니다.

아이디어가 있으신 분은 Tailwind Material로 다중 선택 드롭다운 메뉴를 구현하는 방법을 알려주세요. 

<선택 클래스명='md:w-72' 크기='lg' label='변경 유형' 다수의 값={selectedOptions}> {options.map((o) => { return <옵션 값={o.value}>{o.value} })}

감사합니다!

P粉633733146
P粉633733146

모든 응답 (1)
P粉615829742
P粉6158297422023-09-07 07:57:17 1층

라디오 선택을 위한 문자열로MaterialTailwind.Select组件希望value속성을 사용하고 있는 것 같습니다. Tailwind Material을 사용하여 다중 선택 기능을 구현하고 싶기 때문에 다르게 처리해야 할 수도 있습니다.

한 가지 방법은 선택한 옵션을 구성 요소의 상태에서 선택한 값의 배열로 관리하는 것입니다. 그런 다음 옵션을 렌더링할 때selectedOptions数组中的值来有条件地应用selected속성을 기반으로 옵션을 일치시킬 수 있습니다.

이를 달성할 수 있는 방법의 예는 다음과 같습니다.

으아악

이 예에서는handleOptionToggle函数用于在状态数组中切换选定的选项。每个Option组件的selected属性是根据选项的值是否存在于selectedOptions가 배열로 설정되어 있습니다.

이 접근 방식은MaterialTailwind.Select구성 요소의 정확한 동작 및 스타일과 정확히 일치하지 않을 수 있지만 사용 가능한 구성 요소를 사용하여 다중 선택 기능을 구현하는 방법을 제공합니다. 프로젝트 디자인 및 요구 사항에 맞게 스타일과 동작을 조정해야 할 수도 있습니다.

좋다+0
답글 추가
    인기 주제
    더>
    인기 기사
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！