Material Tailwind を使用して React で複数選択ドロップダウン メニューを実装する方法
P粉633733146
2023-09-06 09:29:26
<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
使用している
MaterialTailwind.Selectコンポーネントは、無線選択の文字列としてvalue属性を想定しているようです。 Tailwind マテリアルを使用して複数選択機能を実装する必要があるため、別の方法で処理する必要がある場合があります。1 つの方法は、選択されたオプションをコンポーネントの状態で選択された値の配列として管理することです。その後、オプションをレンダリングするときに、
selectedOptions配列の値に基づいて、一致するオプションにselected属性を条件付きで適用できます。これを実現する方法の例を次に示します:
リーリーこの例では、
handleOptionToggle関数を使用して、ステータス配列内の選択されたオプションを切り替えます。各Optionコンポーネントのselectedプロパティは、オプション値がselectedOptions配列に存在するかどうかに基づいて設定されます。このアプローチは、
MaterialTailwind.Selectコンポーネントの正確な動作やスタイルと正確に一致しない可能性がありますが、利用可能なコンポーネントを使用して複数選択機能を実装する方法を提供することに注意してください。プロジェクトの設計と要件に合わせてスタイルと動作を調整する必要がある場合があります。