我有一个从库继承的字符串文字联合类型,它有数百个成员(IconName
来自@fortawesome/fontawesome-common-types 的类型,如果你好奇的话)。我无法重新定义此类型或使用枚举来代替。
我知道您无法将字符串文字联合转换为数组。但是是否有某种方法可以使用类型来确保数组包含字符串文字联合的所有可能值?
我可以做类似的事情
const iconNames: IconName[] = [
...
]
Run Code Online (Sandbox Code Playgroud)
但这只能保证数组的所有成员都是有效的IconName
,并不能保证列表是详尽的。
有没有一种方法可以详尽地确认数组的所有成员都符合某种类型,并且该数组列出了该类型的所有可能值?
正如我所说,我不控制这种类型,因此我不能将其重写为枚举,或者将其重写为数组,然后从数组派生联合类型。这里的预期用例是为用户提供一个下拉列表,以从可能的有效值列表中选择一个图标。
在 React 应用程序中,您应该控制<select>
. 只需一个选择就可以非常简单:
const ExampleSelect = () => {
const [value, setValue] = React.useState()
return (
<select
value={value}
onChange={(e) => setValue(e.currentTarget.value)}
>
<option value='foo'>Foo</option>
<option value='bar'>Bar</option>
<option value='baz'>Baz</option>
</select>
)
}
Run Code Online (Sandbox Code Playgroud)
但是当你将multiple
prop 添加到 a 中时<select>
,事情就会变得奇怪。传递给onChange
它的函数会迭代选项并根据哪些选项采取行动,这些选项似乎option.selected === true
只在桌面上工作——在 iOS 上的 Safari 中,选择multiple === true
似乎无法控制。
我觉得这是一个非常基本的问题,但我找不到任何相关内容。我不想安装带有预样式组件的整个库,只是为了能够在<select>
React 应用程序内部选择多个选项。
以下是我尝试过的一些 onChange 函数:
type Setter = React.Dispatch<React.SetStateAction<string[] | undefined>>
type SelectChange = React.ChangeEvent<HTMLSelectElement>
export const handleMultiSelectChange = <S extends Function …
Run Code Online (Sandbox Code Playgroud)