Material Tailwind を使用して React で複数選択ドロップダウン メニューを実装する方法

Question

<p>Tailwind のマテリアル選択コンポーネントとオプション コンポーネントを使用して、複数選択のドロップダウン メニューを構築しようとしています。 </p> <p>しかし、配列を値として Select の value プロパティに渡そうとすると、次のエラーが発生します。</p> <p>無効なプロパティ <code>value</code>、タイプ <code>array</code>、<code>MaterialTailwind.Select</code> に提供されました、予期されるタイプは <code> ;string< ;/コード><

<p>全体的なデザインでは Tailwind マテリアルを使用しているため、react-select は使用したくありません。 </p> <p>誰かアイデアがある場合は、Tailwind マテリアルで複数選択のドロップダウン メニューを実装する方法を教えてください。 </p> <pre class="brush:php;toolbar:false;"><選択 クラス名='md:w-72' サイズ='lg' label='タイプの変更' 複数 値={選択されたオプション}> {options.map((o) => { return <オプション値={o.value}>{o.value}</Option>; })} </選択></前> <p>ありがとうございます! </p>

Answer 1

使用している MaterialTailwind.Select コンポーネントは、無線選択の文字列として value 属性を想定しているようです。 Tailwind マテリアルを使用して複数選択機能を実装する必要があるため、別の方法で処理する必要がある場合があります。

1 つの方法は、選択されたオプションをコンポーネントの状態で選択された値の配列として管理することです。その後、オプションをレンダリングするときに、selectedOptions 配列の値に基づいて、一致するオプションに selected 属性を条件付きで適用できます。

これを実現する方法の例を次に示します:

リーリー

この例では、handleOptionToggle 関数を使用して、ステータス配列内の選択されたオプションを切り替えます。各 Option コンポーネントの selected プロパティは、オプション値が selectedOptions 配列に存在するかどうかに基づいて設定されます。

このアプローチは、MaterialTailwind.Select コンポーネントの正確な動作やスタイルと正確に一致しない可能性がありますが、利用可能なコンポーネントを使用して複数選択機能を実装する方法を提供することに注意してください。プロジェクトの設計と要件に合わせてスタイルと動作を調整する必要がある場合があります。