fix: issue 5834, autocomplete is not being decorated (#6018)

This commit is contained in:
kossel 2017-05-05 01:40:57 -05:00 committed by Benjy Cui
parent f870db26f5
commit 169e0f9762
3 changed files with 39 additions and 4 deletions

View File

@ -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;

View File

@ -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"

View File

@ -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%;