ant-design/components/auto-complete/demo/custom.tsx
thinkasany 05a0179616
demo(AutoComplete): opt options type by AutoCompleteProps (#49768)
* demo(AutoComplete): opt options type by AutoCompleteProps

* lint fix
2024-07-08 16:01:02 +08:00

42 lines
984 B
TypeScript

import React, { useState } from 'react';
import { AutoComplete, Input } from 'antd';
import type { AutoCompleteProps } from 'antd';
const { TextArea } = Input;
const App: React.FC = () => {
const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
const handleSearch = (value: string) => {
setOptions(
!value ? [] : [{ value }, { value: value + value }, { value: value + value + value }],
);
};
const handleKeyPress = (ev: React.KeyboardEvent<HTMLTextAreaElement>) => {
console.log('handleKeyPress', ev);
};
const onSelect = (value: string) => {
console.log('onSelect', value);
};
return (
<AutoComplete
options={options}
style={{ width: 200 }}
onSelect={onSelect}
onSearch={handleSearch}
>
<TextArea
placeholder="input here"
className="custom"
style={{ height: 50 }}
onKeyPress={handleKeyPress}
/>
</AutoComplete>
);
};
export default App;