我无法正确输入onchange函数。我创建了一个处理函数,但是typescript总是抱怨类型不匹配。
我的函数:
private handleChange(options: Array<{label: string, value: number}>) {
}
打字错误:
src/questionnaire-elements/AssessmentFactorSearch.tsx (43,9): Type '{ ref: "select"; name: string; backspaceToRemoveMessage: ""; value: { label: string; value: IAsse...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Async<OptionValues>> & Readonly<{ children?: React...'. Type '{ ref: "select"; name: string; backspaceToRemoveMessage: ""; value: { label: string; value: IAsse...' is not assignable to type 'Readonly<ReactAsyncSelectProps<OptionValues>>'. Types of property 'onChange' are incompatible. Type '(options: { label: string; value: number; }[]) => void' is not assignable to type 'OnChangeHandler<OptionValues, Option<OptionValues> | Option<OptionValues>[]> | undefined'. Type '(options: { label: string; value: number; }[]) => void' is not assignable to type 'OnChangeHandler<OptionValues, Option<OptionValues> | Option<OptionValues>[]>'. (2322)
如何键入onchange方法?
发布于 2019-01-26 01:23:43
基于https://github.com/JedWatson/react-select/issues/2902,只需像这样编写您的处理程序:
// define your option type
type MyOption = {label: string, value: number}
// ...
// define your onChange handler:
private handleChange = (selected?: MyOption | MyOption[] | null) => {
/** Code **/
}
请注意部件MyOption | MyOption[] | null
,它与react-select库中onChange
的定义匹配相同的结构。只需创建您自己的MyOption
类型。
issue线程中的另一个示例还表明,您可以内联传递函数,在这种情况下,会自动推断处理程序参数的类型:
<Select
onChange={selectedOption /* type is automatically inferred here */ => {
if (Array.isArray(selectedOption)) {
throw new Error("Unexpected type passed to ReactSelect onChange handler");
}
doSomethingWithSelectedValue(selectedOption.value);
}}
...
/>
发布于 2021-08-31 18:06:23
以上这些对我来说都不起作用。这就是原因。
type SelectOption = {
label: string
value: string
}
const isSelectOption = (v: any): v is SelectOption => {
if((v as SelectOption).value !== undefined) return v.value
return false
}
<Select
...
onChange={(v) => {
if(isSelectOption(v)) {
doSomethingWith(v.value)
}
}}
/>
发布于 2021-10-27 14:43:46
第二个Select
参数决定应该将该类型设置为多选选择类型还是单选类型。
多项选择使用Select<MyOption, true>
,单项选择使用Select<MyOption>
。
https://stackoverflow.com/questions/47761098
复制相似问题