mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-27 18:50:59 +08:00
1.3 KiB
1.3 KiB
order | title | ||||
---|---|---|---|---|---|
4 |
|
zh-CN
输入框自动完成功能,下面是一个账号注册表单的例子。
推荐使用 AutoComplete 组件。
en-US
Automatic completion of select input.
Using the AutoComplete component is strongly recommended instead as it is more flexible and capable.
import { Select } from 'antd';
const Option = Select.Option;
const Test = React.createClass({
getInitialState() {
return {
options: [],
};
},
handleChange(value) {
let options;
if (!value || value.indexOf('@') >= 0) {
options = [];
} else {
options = ['gmail.com', '163.com', 'qq.com'].map((domain) => {
const email = `${value}@${domain}`;
return <Option key={email}>{email}</Option>;
});
}
this.setState({ options });
},
render() {
// filterOption 需要设置为 false,数据是动态设置的
return (
<Select combobox
style={{ width: 200 }}
onChange={this.handleChange}
filterOption={false}
placeholder="请输入账户名"
>
{this.state.options}
</Select>
);
},
});
ReactDOM.render(<Test />, mountNode);