如何在typescript中为React-Select定义onChange处理程序

6qqygrtg  于 2023-05-01  发布在  TypeScript
关注(0)|答案(9)|浏览(209)

我无法正确输入onchange函数。我创建了一个处理函数,但是typescript一直抱怨类型不匹配。
我的职能:

private handleChange(options: Array<{label: string, value: number}>) {
}

typescript 错误:
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方法?

ghhaqwfi

ghhaqwfi1#

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

g52tjvyc2#

对于react-select3.1.0下面的代码应该工作:

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

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

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

ukxgm1gy3#

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方法中接收它作为第二个参数。

4jb9z9bj

4jb9z9bj4#

2021答案:
1.不要使用@types/react-select库,它已被弃用

  1. 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 }
sdnqo3pr

sdnqo3pr5#

为选项值创建类型:

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 Select版本:5.2.2

knpiaxh1

knpiaxh16#

第二个type参数指示Select应键入为多选选择还是单选。
多选时用Select<MyOption, true>,单选时用Select<MyOption>

umuewwlo

umuewwlo7#

如果人们仍然有一个困难的时期,这是我工作的(不包括 meta):

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
  ...
}
62o28rlo

62o28rlo8#

其他的答案对我不起作用。通过阅读错误信息,我得出了这个解决方案。请注意,这只适用于单选

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

xxslljrj9#

以上都不适合我。这件事起了作用。

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

相关问题