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

64 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
2019-05-07 14:57:32 +08:00
```jsx
import { AutoComplete, Input } from 'antd';
2018-06-27 15:55:04 +08:00
const { TextArea } = Input;
function onSelect(value) {
console.log('onSelect', value);
}
class Complete extends React.Component {
state = {
options: [],
2019-05-07 14:57:32 +08:00
};
2019-05-07 14:57:32 +08:00
handleSearch = value => {
this.setState({
options: !value
? []
: [{ value }, { value: value + value }, { value: value + value + value }],
});
2019-05-07 14:57:32 +08:00
};
2019-05-07 14:57:32 +08:00
handleKeyPress = ev => {
console.log('handleKeyPress', ev);
2019-05-07 14:57:32 +08:00
};
render() {
const { options } = this.state;
return (
<AutoComplete
options={options}
2017-10-08 15:22:24 +08:00
style={{ width: 200 }}
onSelect={onSelect}
onSearch={this.handleSearch}
>
2017-10-08 15:22:24 +08:00
<TextArea
placeholder="input here"
className="custom"
style={{ height: 50 }}
onKeyPress={this.handleKeyPress}
/>
</AutoComplete>
);
}
}
ReactDOM.render(<Complete />, mountNode);
2019-05-07 14:57:32 +08:00
```