将 Alpine 组件转换为 React
Convert Alpine component to React
我正在尝试在 React 中转换一个 Alpine 组件(Select 使用第一个自定义头像)→ https://tailwindui.com/components/application-ui/forms/select-menus
要复制 Alpine 源代码,您可以打开“源代码”选项卡并从那里复制元素,或者我将其粘贴到下面(仅保留 3 个 li
元素,这是重复代码):
<div class="w-full max-w-xs mx-auto">
<!--
Custom select controls like this require a considerable amount of JS to implement from scratch. We're planning
to build some low-level libraries to make this easier with popular frameworks like React, Vue, and even Alpine.js
in the near future, but in the mean time we recommend these reference guides when building your implementation:
https://www.w3.org/TR/wai-aria-practices/#Listbox
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
-->
<div
x-data="Components.customSelect({ open: true, value: 3, selected: 3 })"
x-init="init()"
>
<label id="listbox-label" class="block text-sm font-medium text-gray-700">
Assigned to
</label>
<div class="mt-1 relative">
<button
type="button"
x-ref="button"
@keydown.arrow-up.stop.prevent="onButtonClick()"
@keydown.arrow-down.stop.prevent="onButtonClick()"
@click="onButtonClick()"
aria-haspopup="listbox"
:aria-expanded="open"
aria-expanded="true"
aria-labelledby="listbox-label"
class="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
>
<span class="flex items-center">
<img
:src='["https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80","https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1584486520270-19eca1efcce5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1561505457-3bcad021f8ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"][value]'
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-text='["Wade Cooper","Arlene Mccoy","Devon Webb"][value]'
class="ml-3 block truncate"
>Tom Cook</span
>
</span>
<span
class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
>
<svg
class="h-5 w-5 text-gray-400"
x-description="Heroicon name: selector"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</span>
</button>
<div
x-show="open"
@click.away="open = false"
x-description="Select popover, show/hide based on select state."
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="absolute mt-1 w-full rounded-md bg-white shadow-lg"
>
<ul
@keydown.enter.stop.prevent="onOptionSelect()"
@keydown.space.stop.prevent="onOptionSelect()"
@keydown.escape="onEscape()"
@keydown.arrow-up.prevent="onArrowUp()"
@keydown.arrow-down.prevent="onArrowDown()"
x-ref="listbox"
tabindex="-1"
role="listbox"
aria-labelledby="listbox-label"
:aria-activedescendant="activeDescendant"
class="max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
x-max="1"
aria-activedescendant=""
>
<li
x-description="Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
id="listbox-item-0"
role="option"
@click="choose(0)"
@mouseenter="selected = 0"
@mouseleave="selected = null"
:class="{ 'text-white bg-indigo-600': selected === 0, 'text-gray-900': !(selected === 0) }"
class="cursor-default select-none relative py-2 pl-3 pr-9 text-gray-900"
>
<div class="flex items-center">
<img
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-state:on="Selected"
x-state:off="Not Selected"
:class="{ 'font-semibold': value === 0, 'font-normal': !(value === 0) }"
class="ml-3 block font-normal truncate"
>
Wade Cooper
</span>
</div>
<span
x-description="Checkmark, only display for selected option."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
x-show="value === 0"
:class="{ 'text-white': selected === 0, 'text-indigo-600': !(selected === 0) }"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
style="display: none"
>
<svg
class="h-5 w-5"
x-description="Heroicon name: check"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</span>
</li>
<li
x-description="Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
id="listbox-item-1"
role="option"
@click="choose(1)"
@mouseenter="selected = 1"
@mouseleave="selected = null"
:class="{ 'text-white bg-indigo-600': selected === 1, 'text-gray-900': !(selected === 1) }"
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9"
>
<div class="flex items-center">
<img
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-state:on="Selected"
x-state:off="Not Selected"
:class="{ 'font-semibold': value === 1, 'font-normal': !(value === 1) }"
class="ml-3 block font-normal truncate"
>
Arlene Mccoy
</span>
</div>
<span
x-description="Checkmark, only display for selected option."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
x-show="value === 1"
:class="{ 'text-white': selected === 1, 'text-indigo-600': !(selected === 1) }"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
style="display: none"
>
<svg
class="h-5 w-5"
x-description="Heroicon name: check"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</span>
</li>
<li
x-description="Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
id="listbox-item-2"
role="option"
@click="choose(2)"
@mouseenter="selected = 2"
@mouseleave="selected = null"
:class="{ 'text-white bg-indigo-600': selected === 2, 'text-gray-900': !(selected === 2) }"
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9"
>
<div class="flex items-center">
<img
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-state:on="Selected"
x-state:off="Not Selected"
:class="{ 'font-semibold': value === 2, 'font-normal': !(value === 2) }"
class="ml-3 block font-normal truncate"
>
Devon Webb
</span>
</div>
<span
x-description="Checkmark, only display for selected option."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
x-show="value === 2"
:class="{ 'text-white': selected === 2, 'text-indigo-600': !(selected === 2) }"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
style="display: none"
>
<svg
class="h-5 w-5"
x-description="Heroicon name: check"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</span>
</li>
<!-- More options... -->
</ul>
</div>
</div>
</div>
</div>
我了解大部分内容,但我不了解 @click=choose(0)
和 x-state:on="Selected" x-state:off="Not Selected"
,例如 Selected
和 Not Selected
在哪里使用。
我只是想将此组件转换为 React,但有些事情我不理解。非常感谢任何帮助:)
我选择了 Listbox component from @headlessui/react to achieve the same result:
SelectWithAvatar.tsx
import * as React from 'react'
import { Listbox, Transition } from '@headlessui/react'
import clsx from 'clsx'
import { Selector, Check } from '@/components/icons/index'
type Option = {
id: string
name: string
img: string
}
interface IProps {
label?: string
value: Option
onChange: (name: string) => void
options: Array<Option>
}
export const SelectWithAvatar = ({ label, options, value, onChange }: IProps) => {
return (
<Listbox
value={value}
onChange={(value: Option) => {
onChange(value.name)
}}
>
{({ open }) => (
<>
<Listbox.Label className="mb-1 text-sm font-medium text-blue-gray-500">
{label}
</Listbox.Label>
<div className="relative mt-1">
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white border border-gray-300 rounded-md shadow-sm cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="flex items-center">
<img
src={value.img}
alt={value.name}
className="flex-shrink-0 w-6 h-6 rounded-full"
/>
<span className="block ml-3 truncate">{value.name}</span>
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 ml-3 pointer-events-none">
<Selector />
</span>
</Listbox.Button>
<div className="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
<Transition
show={open}
leave="transition duration-100 ease-in"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
<Listbox.Options
static
className="py-1 overflow-auto text-base rounded-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
>
{options.map((option) => {
return (
<Listbox.Option as={React.Fragment} key={option.id} value={option}>
{({ active, selected }) => {
return (
<li
className={clsx(
'relative py-2 pl-3 cursor-default select-none pr-9',
{
'text-white bg-indigo-600': active,
'text-gray-900': !active,
}
)}
>
<div className="flex items-center">
<img
src={option.img}
alt={option.name}
className="flex-shrink-0 w-6 h-6 rounded-full"
/>
<span
className={clsx('ml-3 block truncate', {
'font-semibold': selected,
'font-normal': !selected,
})}
>
{option.name}
</span>
</div>
{selected && (
<span
className={clsx(
'absolute inset-y-0 right-0 flex items-center pr-4',
{
'text-white': active,
'text-indigo-600': !active,
}
)}
>
<Check />
</span>
)}
</li>
)
}}
</Listbox.Option>
)
})}
</Listbox.Options>
</Transition>
</div>
</div>
</>
)}
</Listbox>
)
}
components/icons/index
import React from 'react'
export const Selector = () => (
<svg
className="w-5 h-5 text-indigo-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
)
export const Check = () => (
<svg
className="w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
)
我正在尝试在 React 中转换一个 Alpine 组件(Select 使用第一个自定义头像)→ https://tailwindui.com/components/application-ui/forms/select-menus
要复制 Alpine 源代码,您可以打开“源代码”选项卡并从那里复制元素,或者我将其粘贴到下面(仅保留 3 个 li
元素,这是重复代码):
<div class="w-full max-w-xs mx-auto">
<!--
Custom select controls like this require a considerable amount of JS to implement from scratch. We're planning
to build some low-level libraries to make this easier with popular frameworks like React, Vue, and even Alpine.js
in the near future, but in the mean time we recommend these reference guides when building your implementation:
https://www.w3.org/TR/wai-aria-practices/#Listbox
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
-->
<div
x-data="Components.customSelect({ open: true, value: 3, selected: 3 })"
x-init="init()"
>
<label id="listbox-label" class="block text-sm font-medium text-gray-700">
Assigned to
</label>
<div class="mt-1 relative">
<button
type="button"
x-ref="button"
@keydown.arrow-up.stop.prevent="onButtonClick()"
@keydown.arrow-down.stop.prevent="onButtonClick()"
@click="onButtonClick()"
aria-haspopup="listbox"
:aria-expanded="open"
aria-expanded="true"
aria-labelledby="listbox-label"
class="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
>
<span class="flex items-center">
<img
:src='["https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80","https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1584486520270-19eca1efcce5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80","https://images.unsplash.com/photo-1561505457-3bcad021f8ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"][value]'
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-text='["Wade Cooper","Arlene Mccoy","Devon Webb"][value]'
class="ml-3 block truncate"
>Tom Cook</span
>
</span>
<span
class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
>
<svg
class="h-5 w-5 text-gray-400"
x-description="Heroicon name: selector"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</span>
</button>
<div
x-show="open"
@click.away="open = false"
x-description="Select popover, show/hide based on select state."
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="absolute mt-1 w-full rounded-md bg-white shadow-lg"
>
<ul
@keydown.enter.stop.prevent="onOptionSelect()"
@keydown.space.stop.prevent="onOptionSelect()"
@keydown.escape="onEscape()"
@keydown.arrow-up.prevent="onArrowUp()"
@keydown.arrow-down.prevent="onArrowDown()"
x-ref="listbox"
tabindex="-1"
role="listbox"
aria-labelledby="listbox-label"
:aria-activedescendant="activeDescendant"
class="max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
x-max="1"
aria-activedescendant=""
>
<li
x-description="Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
id="listbox-item-0"
role="option"
@click="choose(0)"
@mouseenter="selected = 0"
@mouseleave="selected = null"
:class="{ 'text-white bg-indigo-600': selected === 0, 'text-gray-900': !(selected === 0) }"
class="cursor-default select-none relative py-2 pl-3 pr-9 text-gray-900"
>
<div class="flex items-center">
<img
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-state:on="Selected"
x-state:off="Not Selected"
:class="{ 'font-semibold': value === 0, 'font-normal': !(value === 0) }"
class="ml-3 block font-normal truncate"
>
Wade Cooper
</span>
</div>
<span
x-description="Checkmark, only display for selected option."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
x-show="value === 0"
:class="{ 'text-white': selected === 0, 'text-indigo-600': !(selected === 0) }"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
style="display: none"
>
<svg
class="h-5 w-5"
x-description="Heroicon name: check"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</span>
</li>
<li
x-description="Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
id="listbox-item-1"
role="option"
@click="choose(1)"
@mouseenter="selected = 1"
@mouseleave="selected = null"
:class="{ 'text-white bg-indigo-600': selected === 1, 'text-gray-900': !(selected === 1) }"
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9"
>
<div class="flex items-center">
<img
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-state:on="Selected"
x-state:off="Not Selected"
:class="{ 'font-semibold': value === 1, 'font-normal': !(value === 1) }"
class="ml-3 block font-normal truncate"
>
Arlene Mccoy
</span>
</div>
<span
x-description="Checkmark, only display for selected option."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
x-show="value === 1"
:class="{ 'text-white': selected === 1, 'text-indigo-600': !(selected === 1) }"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
style="display: none"
>
<svg
class="h-5 w-5"
x-description="Heroicon name: check"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</span>
</li>
<li
x-description="Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
id="listbox-item-2"
role="option"
@click="choose(2)"
@mouseenter="selected = 2"
@mouseleave="selected = null"
:class="{ 'text-white bg-indigo-600': selected === 2, 'text-gray-900': !(selected === 2) }"
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9"
>
<div class="flex items-center">
<img
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
alt=""
class="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span
x-state:on="Selected"
x-state:off="Not Selected"
:class="{ 'font-semibold': value === 2, 'font-normal': !(value === 2) }"
class="ml-3 block font-normal truncate"
>
Devon Webb
</span>
</div>
<span
x-description="Checkmark, only display for selected option."
x-state:on="Highlighted"
x-state:off="Not Highlighted"
x-show="value === 2"
:class="{ 'text-white': selected === 2, 'text-indigo-600': !(selected === 2) }"
class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
style="display: none"
>
<svg
class="h-5 w-5"
x-description="Heroicon name: check"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
</span>
</li>
<!-- More options... -->
</ul>
</div>
</div>
</div>
</div>
我了解大部分内容,但我不了解 @click=choose(0)
和 x-state:on="Selected" x-state:off="Not Selected"
,例如 Selected
和 Not Selected
在哪里使用。
我只是想将此组件转换为 React,但有些事情我不理解。非常感谢任何帮助:)
我选择了 Listbox component from @headlessui/react to achieve the same result:
SelectWithAvatar.tsx
import * as React from 'react'
import { Listbox, Transition } from '@headlessui/react'
import clsx from 'clsx'
import { Selector, Check } from '@/components/icons/index'
type Option = {
id: string
name: string
img: string
}
interface IProps {
label?: string
value: Option
onChange: (name: string) => void
options: Array<Option>
}
export const SelectWithAvatar = ({ label, options, value, onChange }: IProps) => {
return (
<Listbox
value={value}
onChange={(value: Option) => {
onChange(value.name)
}}
>
{({ open }) => (
<>
<Listbox.Label className="mb-1 text-sm font-medium text-blue-gray-500">
{label}
</Listbox.Label>
<div className="relative mt-1">
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white border border-gray-300 rounded-md shadow-sm cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="flex items-center">
<img
src={value.img}
alt={value.name}
className="flex-shrink-0 w-6 h-6 rounded-full"
/>
<span className="block ml-3 truncate">{value.name}</span>
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 ml-3 pointer-events-none">
<Selector />
</span>
</Listbox.Button>
<div className="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
<Transition
show={open}
leave="transition duration-100 ease-in"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
<Listbox.Options
static
className="py-1 overflow-auto text-base rounded-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
>
{options.map((option) => {
return (
<Listbox.Option as={React.Fragment} key={option.id} value={option}>
{({ active, selected }) => {
return (
<li
className={clsx(
'relative py-2 pl-3 cursor-default select-none pr-9',
{
'text-white bg-indigo-600': active,
'text-gray-900': !active,
}
)}
>
<div className="flex items-center">
<img
src={option.img}
alt={option.name}
className="flex-shrink-0 w-6 h-6 rounded-full"
/>
<span
className={clsx('ml-3 block truncate', {
'font-semibold': selected,
'font-normal': !selected,
})}
>
{option.name}
</span>
</div>
{selected && (
<span
className={clsx(
'absolute inset-y-0 right-0 flex items-center pr-4',
{
'text-white': active,
'text-indigo-600': !active,
}
)}
>
<Check />
</span>
)}
</li>
)
}}
</Listbox.Option>
)
})}
</Listbox.Options>
</Transition>
</div>
</div>
</>
)}
</Listbox>
)
}
components/icons/index
import React from 'react'
export const Selector = () => (
<svg
className="w-5 h-5 text-indigo-600"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
)
export const Check = () => (
<svg
className="w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clipRule="evenodd"
/>
</svg>
)