Material Tailwind를 사용하여 React에서 다중 선택 드롭다운 메뉴를 구현하는 방법

Question

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}</Option>
  })}
</선택>

감사합니다!

Answer 1

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

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

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

으아악

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

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