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。

请看这里: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

codesandbox中的整个错误信息是:

(JSX属性)UseAutocompleteProps<Option,>.onChange?:(事件:React.SyntheticEvent<Element，事件>，值:(string | Option)[]，原因:autocompletechangerreason，详细信息?): AutocompleteChangeDetails<…>) =>无效当值改变时触发回调。

@param event -回调的事件源。

@param value -组件的新值。

@param reason - "createOption" selectOption" removeOption" "blur"或"clear".

@param细节类型'布尔'不能分配给类型'(事件:SyntheticEvent<Element，事件>，值:(string | Option)[]，原因:autocompletechangerreason，详细信息?: AutocompleteChangeDetails<…>) =>无效的.ts (2322)useAutocomplete.d。ts(267,3):期望的类型来自属性'onChange'，它在类型'IntrinsicAttributes &AutocompleteProps<选项，true,>'

表示类型必须为

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

这甚至与Option | string相差甚远。相反，它说onChange必须是一个函数，它接受3个必需参数和一个可选参数，并返回void。事实上，一般来说，任何以"on"开头的道具是一个回调函数，且必须是一个函数。

这里的一个关键是确保您理解整个错误消息。当你问一个问题时，复制/粘贴错误信息，而不是输入你自己的摘要。如果你不把所有的东西都贴出来，很容易漏掉重要的细节。