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都是回调，必须是函数。

这里的一个关键是确保您了解整个错误消息。 当您提出问题时，请复制/粘贴错误消息，而不是输入您自己的摘要。 如果您不发布整个内容，很容易错过重要的细节。