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-prefix-cls} {
|
||||||
.input();
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -54,7 +53,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.@{input-prefix-cls} {
|
.@{input-prefix-cls} {
|
||||||
border: @border-width-base @border-style-base @border-color-base;
|
border-width: @border-width-base;
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
.hover;
|
.hover;
|
||||||
|
@ -14,9 +14,10 @@ title:
|
|||||||
Fill in this form to create a new account for you.
|
Fill in this form to create a new account for you.
|
||||||
|
|
||||||
````jsx
|
````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 FormItem = Form.Item;
|
||||||
const Option = Select.Option;
|
const Option = Select.Option;
|
||||||
|
const AutoCompleteOption = AutoComplete.Option;
|
||||||
|
|
||||||
const residences = [{
|
const residences = [{
|
||||||
value: 'zhejiang',
|
value: 'zhejiang',
|
||||||
@ -45,6 +46,7 @@ const residences = [{
|
|||||||
class RegistrationForm extends React.Component {
|
class RegistrationForm extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
confirmDirty: false,
|
confirmDirty: false,
|
||||||
|
autoCompleteResult: [],
|
||||||
};
|
};
|
||||||
handleSubmit = (e) => {
|
handleSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -73,8 +75,21 @@ class RegistrationForm extends React.Component {
|
|||||||
}
|
}
|
||||||
callback();
|
callback();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleWebsiteChange = (value) => {
|
||||||
|
let autoCompleteResult;
|
||||||
|
if (!value) {
|
||||||
|
autoCompleteResult = [];
|
||||||
|
} else {
|
||||||
|
autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
|
||||||
|
}
|
||||||
|
this.setState({ autoCompleteResult });
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { getFieldDecorator } = this.props.form;
|
const { getFieldDecorator } = this.props.form;
|
||||||
|
const { autoCompleteResult } = this.state;
|
||||||
|
|
||||||
const formItemLayout = {
|
const formItemLayout = {
|
||||||
labelCol: {
|
labelCol: {
|
||||||
xs: { span: 24 },
|
xs: { span: 24 },
|
||||||
@ -104,6 +119,11 @@ class RegistrationForm extends React.Component {
|
|||||||
<Option value="86">+86</Option>
|
<Option value="86">+86</Option>
|
||||||
</Select>
|
</Select>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const websiteOptions = autoCompleteResult.map((website) => {
|
||||||
|
return <AutoCompleteOption key={website}>{website}</AutoCompleteOption>;
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form onSubmit={this.handleSubmit}>
|
<Form onSubmit={this.handleSubmit}>
|
||||||
<FormItem
|
<FormItem
|
||||||
@ -190,6 +210,22 @@ class RegistrationForm extends React.Component {
|
|||||||
<Input addonBefore={prefixSelector} />
|
<Input addonBefore={prefixSelector} />
|
||||||
)}
|
)}
|
||||||
</FormItem>
|
</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
|
<FormItem
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
label="Captcha"
|
label="Captcha"
|
||||||
|
@ -248,7 +248,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.@{select-prefix-cls}-search__field {
|
.@{select-prefix-cls}-search__field {
|
||||||
border: 0;
|
border: 0 @border-style-base @border-color-base;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
Loading…
Reference in New Issue
Block a user