Mui Autocomplete 說 onChange 值可以是字符串

Question

我正在使用我的自定義類型呈現 MUI 自動完成，如下所示：

type Option = { label: string; value: string };
return (
  <MuiAutocomplete<Option, true, any, true>
    freeSolo={true}
    onChange   // says value can be type Option | string
  />
);

但是， onChange簽名表示值的類型可以是Option | string Option | string而不僅僅是Option 。

見這里： https ://codesandbox.io/s/freesolo-demo-material-ui-forked-sn8l5i?file=/demo.tsx

有人知道為什么嗎？

Answer 1

您還沒有定義 onChange 函數

type Option = { label: string; value: string };
const handleOnChange = (e) => {
  console.log('Changed')
}
return (
  <MuiAutocomplete<Option, true, any, true>
    freeSolo={true}
    onChange={handleOnChange}   // says value can be type Option | string
  />
);

Answer 2

您的代碼框中的整個錯誤消息是：

(JSX 屬性) UseAutocompleteProps<Option, true, any, true>.onChange?: (event: React.SyntheticEvent<Element, Event>, value: (string | Option)[], reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<. ..>) => void 值更改時觸發回調。

@param event — 回調的事件源。

@param value — 組件的新值。

@param reason — “createOption”、“selectOption”、“removeOption”、“blur”或“clear”之一。

@參數詳細信息

類型 'boolean' 不可分配給類型 '(event: SyntheticEvent<Element, Event>, value: (string | Option)[], reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<...>) => void'.ts (2322) useAutocomplete.d.ts(267, 3)：預期類型來自屬性“onChange”，該屬性在此處聲明類型為“IntrinsicAttributes & AutocompleteProps<Option, true, any, true, "div">'

這表示類型必須是

(event: SyntheticEvent<Element, Event>, value: (string | Option)[], reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<...>) => void

這甚至與Option | string不一樣。 Option | string 。 相反，它說onChange必須是一個接受 3 個必需參數和一個可選參數並返回void的函數。 事實上，一般來說，任何以“on”開頭的prop都是回調，必須是函數。

這里的一個關鍵是確保您了解整個錯誤消息。 當您提出問題時，請復制/粘貼錯誤消息，而不是輸入您自己的摘要。 如果您不發布整個內容，很容易錯過重要的細節。