如何在打字稿中为 React-Select 定义 onChange 处理程序

Question

我无法正确输入 onchange 函数。我创建了一个处理函数，但打字稿一直抱怨类型不匹配。

我的职能：

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 方法？

Answer 1

基于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

类型即可。

该问题线程中的另一个示例还表明您可以内联传递函数，在这种情况下会自动推断处理程序参数的类型：

<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);
  }}
  ...
/>

Answer 2

对于 react-select ^3.1.0 下面的代码应该有效：

import {ValueType, ActionMeta} from 'react-select';

type MyOptionType = { label: string, value: number }

type OnChange = (value: ValueType<MyOptionType>, actionMeta: ActionMeta<MyOptionType>) => void;

Answer 3

2022，使用

"react-select": "^5.4.0"

和

"typescript": "4.7.4"

.

根据react-select 文档，这对我有用：

type SelectOptionType = { label: string, value: string }

const [myState, setMyState] = useState({})

const handleSelectionChange = (option: SelectOptionType | null) => {
  if (option) {
    setMyState(option)
  }
};

...

<Select 
  options={options} 
  onChange={handleSelectionChange}
/>

如果您使用的是多选，则必须更改

handleSelectionChange

方法签名以接收

option

变量作为

SelectOptionType

的只读数组（正如我命名我的选项的类型）。像这样的东西：

const handleSelectionChange = (option: readonly Option[]) => {
 // typecheck and do whatever you want e.g. setState
}

我没有使用可选的

actionMeta

，但您也可以在

handleSelectionChange

方法中将其作为第二个参数接收。

Answer 4

2021答案：

1. 不要使用@types/react-select 库，它已被弃用
2. onChange 处理程序

处理程序：

const addTagHandler = (tags: OnChangeValue<TagOptionType, true>) => {
    if (tags) {
      setTags((tags as TagOptionType[]).map((tag: TagOptionType) => tag.value));
    }
  };

地点：

1. boolean true 指isMulti（是否有多个元素，或者单个）
2. TagOptionType 看起来在哪里

如下：

type TagOptionType = { label: string, value: string }

Answer 5

为选项值创建一个类型：

type SelectValue = {
  label: string;
  value: string;
};

使用

MultiValue<SelectValue>

进行多值选择输入。

SingleValue<SelectValue>

用于单值选择输入。

ActionMeta

包含有关执行的操作的信息。例如。在多值选择输入中，它包含有关从选择中添加或删除的内容的信息。

import Select, { ActionMeta, MultiValue } from "react-select";

const handleSelectionChange = (
   newSelections: MultiValue<SelectValue>,
   actionMeta: ActionMeta<SelectValue>
) => {
    // define your logic
};

React 选择版本：5.2.2

Answer 6

第二个类型参数指示

Select

应键入多选还是单选。

使用

Select<MyOption, true>

多选，

Select<MyOption>

单选。

Answer 7

如果人们仍然很难过，这对我有用（不包括元）：

import { ValueType } from 'react-select/src/types';
interface MyOptionType = { value: string; label: string };

const handleChange = (value: ValueType<MyOptionType>) => {
  const val: MyOptionType = value as MyOptionType; // casting
  
  // insert your logic here using the casted variable
  ...
}

Answer 8

遗憾的是，其他答案对我不起作用。通过阅读错误消息，我找到了这个解决方案。请注意这仅适用于单选

import { SingleValue } from "react-select";

type OptionType = {
  value: string;
  label: string;
};

// alternative: onChange(option: OptionType | null | "")
function onChange(option: SingleValue<OptionType> | "") {
  if (option === null || option === "") {
    return;
  }
  // logic
}

<Select
  ...
  onChange={onChange}
/>

Answer 9

以上都不适合我。这样做了。

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)
    }
  }}
/>