mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 03:29:39 +08:00
fix: issue 5834, autocomplete is not being decorated (#6018)
This commit is contained in:
parent
f870db26f5
commit
169e0f9762
@ -31,7 +31,6 @@
|
||||
}
|
||||
|
||||
.@{input-prefix-cls} {
|
||||
.input();
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@ -54,7 +53,7 @@
|
||||
}
|
||||
|
||||
.@{input-prefix-cls} {
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-width: @border-width-base;
|
||||
&:focus,
|
||||
&:hover {
|
||||
.hover;
|
||||
|
@ -14,9 +14,10 @@ title:
|
||||
Fill in this form to create a new account for you.
|
||||
|
||||
````jsx
|
||||
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
|
||||
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
const AutoCompleteOption = AutoComplete.Option;
|
||||
|
||||
const residences = [{
|
||||
value: 'zhejiang',
|
||||
@ -45,6 +46,7 @@ const residences = [{
|
||||
class RegistrationForm extends React.Component {
|
||||
state = {
|
||||
confirmDirty: false,
|
||||
autoCompleteResult: [],
|
||||
};
|
||||
handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
@ -73,8 +75,21 @@ class RegistrationForm extends React.Component {
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
||||
handleWebsiteChange = (value) => {
|
||||
let autoCompleteResult;
|
||||
if (!value) {
|
||||
autoCompleteResult = [];
|
||||
} else {
|
||||
autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
|
||||
}
|
||||
this.setState({ autoCompleteResult });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const { autoCompleteResult } = this.state;
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
@ -104,6 +119,11 @@ class RegistrationForm extends React.Component {
|
||||
<Option value="86">+86</Option>
|
||||
</Select>
|
||||
);
|
||||
|
||||
const websiteOptions = autoCompleteResult.map((website) => {
|
||||
return <AutoCompleteOption key={website}>{website}</AutoCompleteOption>;
|
||||
});
|
||||
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
@ -190,6 +210,22 @@ class RegistrationForm extends React.Component {
|
||||
<Input addonBefore={prefixSelector} />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Website"
|
||||
>
|
||||
{getFieldDecorator('website', {
|
||||
rules: [{ required: true, message: 'Please input website!' }],
|
||||
})(
|
||||
<AutoComplete
|
||||
dataSource={websiteOptions}
|
||||
onChange={this.handleWebsiteChange}
|
||||
placeholder="website"
|
||||
>
|
||||
<Input />
|
||||
</AutoComplete>
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="Captcha"
|
||||
|
@ -248,7 +248,7 @@
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-search__field {
|
||||
border: 0;
|
||||
border: 0 @border-style-base @border-color-base;
|
||||
font-size: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
Loading…
Reference in New Issue
Block a user