AutoComplete组件 BUG

[Liguo-Wang]

Environment(required)

• antd version: 2.7.0
• OS and its version:
• Browser and its version:

What did you do? Please provide steps to re-produce your problem.

What do you expected?

What happen?

1.输入框高度变低了
2.自动补全的字符前端自动添加了其他不期望的字符".$"

Re-producible online demo

[RaoHai]

第一个问题在这 #4768
第二个问题有 demo 么。。

[Liguo-Wang]

第二个问题的例子：

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Form, Select, AutoComplete } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const AutoOption = AutoComplete.Option;

import './public/style/main.less';
class Edit extends Component {
    constructor(props){
      super(props);
      this.state = {
        emailChildren: []
      };
      this.handleEmailChange = (value) => {
        let result, emailChildren;
        if (!value || value.indexOf('@') >= 0) {
          result = [];
        } else {
          result = ['126.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
        }
        emailChildren = result.map((email) => {
          return <Option key={email}>{email}</Option>;
        });
        console.log(emailChildren)
        this.setState({ emailChildren });
      }
    }
    render() {
      const { getFieldDecorator } = this.props.form;
      return(
        <div>
          <Form horizontal>
          <FormItem
            label='Email'
            hasFeedback
            >
            {getFieldDecorator('email', {
              rules: [{
                type: 'email', message: 'The input is not valid E-mail!',
              }, { 
                required: true, message: 'Please input Email!' 
              }]
            })(
              <AutoComplete
                onChange={this.handleEmailChange}
                placeholder='Email'
              >
                {this.state.emailChildren}
              </AutoComplete>
            )}
          </FormItem>
        </Form>
        </div>
      )
    }
}
const UserEdit = Form.create()(Edit);
//挂载点
const MOUNT_NODE = document.getElementById('app');
ReactDOM.render(
  <div>
    <UserEdit/>
  </div>,
  MOUNT_NODE
);

这个是加了表单控件的getFieldDecorator这个之后就有问题

[benjycui]

Please learn how to write readable Markdown, and it's a good habit to preview your comment before submitting.

Please provide a re-producible demo: http://codepen.io/benjycui/pen/KgPZrE?editors=001

[Liguo-Wang]

@benjycui @RaoHai OK,demo已经制作好了:http://codepen.io/wangliguo/pen/KaxvYO?editors=1010, 感谢指导

[afc163]

https://facebook.github.io/react/docs/react-component.html#state

this.state 里应该只存 plain JavaScript object，不应该存放 Visual Dom。

[RaoHai]

好像真不是放 virtualdom 的问题。。。

[RaoHai]

找到问题了。。

此处 用了 React.Children.toArray(children);

然鹅，React.Children.toArray 会被 React 加一个 .$ 的 prefix。

https://github.com/facebook/react/blob/6810627a91f2020caee7fecf21580187dc6ef0fc/src/isomorphic/children/ReactChildren.js#L120

[RaoHai]

@wangliguo6666 修复之前你可以暂时用 <AutoComplete dataSource={this.state.emailChildren} /> 规避一下这里。

[Liguo-Wang]

@ALL, 感谢各位的解答帮助！^-^a

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.