>  Q&A  >  본문

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

<p>Tailwind Material Select 및 Option 구성요소를 사용하여 다중 선택 드롭다운 메뉴를 만들려고 합니다. </p> <p>그러나 배열을 Select의 값 속성에 값으로 전달하려고 할 때마다 다음 오류가 발생합니다. </p> <p><code>MaterialTailwind.Select</code>에 제공된 <code>array</code> 유형의 잘못된 속성 <code>value</code> 예상 유형은 <code>string< /코드></p> <p>내 전체 디자인이 Tailwind Material을 사용하기 때문에 반응 선택을 사용하고 싶지 않습니다. </p> <p>아이디어가 있으신 분은 Tailwind Material로 다중 선택 드롭다운 메뉴를 구현하는 방법을 알려주세요. </p> <pre class="brush:php;toolbar:false;"><선택 클래스명='md:w-72' 크기='lg' label='변경 유형' 다수의 값={selectedOptions}> {options.map((o) => { return <옵션 값={o.value}>{o.value}</Option> })} </선택></pre> <p>감사합니다! </p>
P粉633733146P粉633733146409일 전543

모든 응답(1)나는 대답할 것이다

  • P粉615829742

    P粉6158297422023-09-07 07:57:17

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

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

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

    으아악

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

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

    회신하다
    0
  • 취소회신하다