mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
2ea28af6ed
* init * fix firefox * add active style * adjust arrow style * update select * update icon logic * render empty * init multiple * fix ff display style * sync font size * adjust padding style * add padding * padding it * hotfix of chrome * single sm * multiple size * update option group style * update snapshot * clean up transition * rm combobox in ts define * auto complete init * fix auto option def * update demo * update demo * update uncertain demo * update demo * warning if user set `size` on AutoComplete * add debug demo * updat demo * update demo of disabled * update snapshot * rm useless test * fix pagination test * fix Table test * fix calendar test case * fix calendar test case * adjust style * add big data demo * support clean up * fix ts define * fix lint * fix demo lint * fix style lint fix * rm useless deps * update snapshot * stop mock * add space
1.1 KiB
1.1 KiB
order | title | ||||
---|---|---|---|---|---|
3 |
|
zh-CN
自定义输入组件。
en-US
Customize Input Component
import { AutoComplete, Input } from 'antd';
const { TextArea } = Input;
function onSelect(value) {
console.log('onSelect', value);
}
class Complete extends React.Component {
state = {
options: [],
};
handleSearch = value => {
this.setState({
options: !value
? []
: [{ value }, { value: value + value }, { value: value + value + value }],
});
};
handleKeyPress = ev => {
console.log('handleKeyPress', ev);
};
render() {
const { options } = this.state;
return (
<AutoComplete
options={options}
style={{ width: 200 }}
onSelect={onSelect}
onSearch={this.handleSearch}
>
<TextArea
placeholder="input here"
className="custom"
style={{ height: 50 }}
onKeyPress={this.handleKeyPress}
/>
</AutoComplete>
);
}
}
ReactDOM.render(<Complete />, mountNode);