我如何在 TypeScript 中為 React-Select 定義 onChange 處理函數

我無法正確地輸入 onchange 函數。我創建了一個處理函數，但 TypeScript 一直抱怨類型不匹配。

我的函數：

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

Typescript 錯誤：

src/questionnaire-elements/AssessmentFactorSearch.tsx (43,9)：型別 '{ ref: "select"; name: string; backspaceToRemoveMessage: ""; value: { label: string; value: IAsse... }' 無法指派給型別 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly<{ children?: React... }>'. 型別 '{ ref: "select"; name: string; backspaceToRemoveMessage: ""; value: { label: string; value: IAsse... }' 無法指派給型別 'Readonly>'。屬性 'onChange' 的類型不相容。類型 '(options: { label: string; value: number; }[]) => void' 無法指派給類型 'OnChangeHandler | Option[] > | undefined'。類型 '(options: { label: string; value: number; }[]) => void' 無法指派給類型 'OnChangeHandler | Option[]>'。(2322)

我該如何輸入 onchange 方法？

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

答案＃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;