英文:
Ant-design autocomplete ValueType/OptionType issue
问题
I'm trying to use antd AutoComplete with TypeScript with value as a string, but I'm ending up with TypeScript errors for both options and value.
For the value I have - 类型 string 无法赋值给类型 ValueType | null
For the options - 类型 string[] 无法赋值给类型 OptionType[]
然而，antd 没有提供任何 ValueType 或 OptionType 类型供我导入，因此我甚至无法猜测应该使用哪种格式。是否有人遇到过相同的问题或已解决了这个问题？
import { useMemo, useState } from 'react';
import { AutoComplete } from 'antd';
export const TagsAutocomplete = ({ onSelect, value }: { onSelect: (elem: string) => void, value: string }) => {
const options: string[] = ['Tag 1', 'Tag 2', 'Tag 3'];
const [inputText, setInputText] = useState('');
const filteredOptions = useMemo(() => {
return options.filter((option) => option.toLowerCase().includes(inputText.toLowerCase()));
}, [options, inputText]);
return (
<AutoComplete
value={value} // 类型 string 无法赋值给类型 ValueType | null
options={filteredOptions} // 类型 string[] 无法赋值给类型 OptionType[]
onSelect={onSelect}
onSearch={setInputText}
/>
)
}
对于值/选项格式，我尝试使用了 string 和对象格式 {value: string}。这两种方法都导致了类型错误。
英文:
I'm trying to use antd AutoComplete with typscript with value as a string, but I'm ending up with typescript errors for both options and value.
For the value I have - Type string is not assignable to type ValueType | null
For the options - Type string[] is not assignable to type OptionType[]
However antd doesn't distrubute any ValueType of OptionType types for me to import, so I can't even guess the format that I should be using. Have anyone had or maybe solved the same issue?
import { useMemo, useState } from 'react';
import { AutoComplete } from 'antd';
export const TagsAutocomplete = ({onSelect, value}: {onSelect: (elem: string) => void, value: string}) => {
const options: string[] = ['Tag 1', 'Tag 2', 'Tag 3'];
const [inputText, setInputText] = useState('');
const filteredOptions = useMemo(() => {
return options.filter((option) => option.toLowerCase().includes(inputText.toLowerCase()));
}, [options, inputText]);
return (
<AutoComplete
value={value} // Type string is not assignable to type ValueType | null
options={filteredOptions} // Type string[] is not assignable to type OptionType[]
onSelect={onSelect}
onSearch={setInputText}
/>
)
}
For value/option format I tried to use string and object in format {value: string}. Both approaches gave me the types error
答案1
得分: 1
你可以通过点击 options 属性并同时按住 ctrl（对于Windows/Linux）或 command（对于Mac）来查看定义。
否则，请参考官方 文档：
options 选择选项。性能比jsx定义更好 { label, value }[]
因此，将 options 重构为 {label: string, value: string}[] 并从组件中提取它，因为它是一个常量，不需要将它保留在组件中：
const options = [
{ label: '标签1', value: '标签1' },
{ label: '标签2', value: '标签2' },
{ label: '标签3', value: '标签3' },
];
英文:
You can check the definitions by clicking on the options prop while holding ctrl for windows/linux and command for Mac.
Otherwise, refer to the official documentation:
options Select options. Will get better perf than jsx definition { label, value }[]
Thus, refactor options to {label: string, value: string}[] and extract it from the component, since it is a constant and no need to keep it in the component:
const options = [
{ label: 'Tag 1', value: 'Tag1' },
{ label: 'Tag 2', value: 'Tag2' },
{ label: 'Tag 3', value: 'Tag3' },
];
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论