ant-design/components/auto-complete/demo/custom.md

56 lines
1.1 KiB
Markdown
Raw Normal View History

---
order: 3
title:
zh-CN: 自定义输入组件
en-US: Customize Input Component
---
## zh-CN
自定义输入组件。
## en-US
Customize Input Component
2020-01-21 16:21:37 +08:00
```tsx
import { AutoComplete, Input } from 'antd';
2018-06-27 15:55:04 +08:00
const { TextArea } = Input;
2020-01-21 17:14:58 +08:00
const Complete: React.FC = () => {
const [options, setOptions] = React.useState<{ value: string }[]>([]);
2020-01-21 16:21:37 +08:00
const handleSearch = (value: string) => {
setOptions(
!value ? [] : [{ value }, { value: value + value }, { value: value + value + value }],
);
2019-05-07 14:57:32 +08:00
};
2020-01-21 16:21:37 +08:00
const handleKeyPress = (ev: React.KeyboardEvent<HTMLTextAreaElement>) => {
console.log('handleKeyPress', ev);
2019-05-07 14:57:32 +08:00
};
2020-01-21 16:21:37 +08:00
const onSelect = (value: string) => {
console.log('onSelect', value);
2019-05-07 14:57:32 +08:00
};
2020-01-21 16:21:37 +08:00
return (
<AutoComplete
options={options}
style={{ width: 200 }}
onSelect={onSelect}
onSearch={handleSearch}
>
<TextArea
placeholder="input here"
className="custom"
style={{ height: 50 }}
onKeyPress={handleKeyPress}
/>
</AutoComplete>
);
};
ReactDOM.render(<Complete />, mountNode);
2019-05-07 14:57:32 +08:00
```