В нашей библиотеке пользовательского интерфейса мы использовали antd AutoComplete и передаем функцию onSelect. OnSelect принимает 2 аргумента. 1 — это значение, которое является строкой, а другое — параметром, который показывает тип как OptionData | OptionGroupData
Мой вопрос: откуда я могу импортировать OptionGroupData и OptionData? Версия антд:
"antd": "4.23.6"
PS: модуль '"rc-select/lib/interface"' не имеет экспортированного члена 'OptionGroupData'.ts(2305)
В более старых версиях Обычно эти интерфейсы располагались в
node_modules/rc-select/lib/interface/index.d.ts
А они были:
export interface OptionCoreData {
key?: Key;
disabled?: boolean;
value: Key;
title?: string;
className?: string;
style?: React.CSSProperties;
label?: React.ReactNode;
/** @deprecated Only works when use `children` as option data */
children?: React.ReactNode;
}
export interface OptionData extends OptionCoreData {
/** Save for customize data */
[prop: string]: any;
}
export interface OptionGroupData {
key?: Key;
label?: React.ReactNode;
options: OptionData[];
className?: string;
style?: React.CSSProperties;
/** Save for customize data */
[prop: string]: any;
}
Но в версии типа "4.23.6" видимо эти интерфейсы убрали. Второй тип аргумента теперь:
{id:number; value:string}
Например, вы можете использовать AutoComplete
:
const MyAutoComplete: React.FC = () => {
const [value, setValue] = useState('');
const [options, setOptions] =
useState<{ value: string, id: number }[]>([
{ id: 1, value: "firstItem" },
{ id: 2, value: "secondItem" }
]);
const onSelected = (value: any, option: { id: number; value: string }) => {
console.info(value, option);
};
const onChange = (data: string) => {
setValue(data);
};
return (
<AutoComplete
options = {options}
onSelect = {(value, option) => onSelected(value, option)}
/>
);
};