如何在typescript中为React-Select定义onChange处理程序
我无法正确输入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方法？
回答 3
Stack Overflow用户
发布于 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);
}}
...
/>Stack Overflow用户
发布于 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)
}
}}
/>Stack Overflow用户
发布于 2021-10-27 14:43:46
第二个Select参数决定应该将该类型设置为多选选择类型还是单选类型。
多项选择使用Select<MyOption, true>，单项选择使用Select<MyOption>。
https://stackoverflow.com/questions/47761098
复制相似问题