ant-design/components/auto-complete/demo/antd.md
陆离 fc3f4e1922 fix AutoComplete size (#4768)
*  fix AutoComplete size

 + close #4766

* use input mixin

* use css variables

*  use children directly instead of React.Children.toArray

 + close #4778
2017-02-09 10:45:42 +08:00

1.0 KiB

order title
3
zh-CN en-US
自定义输入组件 Customize Input Component

zh-CN

自定义输入组件。

en-US

Customize Input Component

import { AutoComplete } from 'antd';

function onSelect(value) {
  console.log('onSelect', value);
}

const Complete = React.createClass({
  getInitialState() {
    return {
      dataSource: [],
    };
  },
  handleChange(value) {
    this.setState({
      dataSource: !value ? [] : [
        value,
        value + value,
        value + value + value,
      ],
    });
  },
  handleKeyPress(ev) {
    console.log('handleKeyPress', ev);
  },
  render() {
    const { dataSource } = this.state;
    return (
      <AutoComplete
        dataSource={dataSource}
        style={{ width: 200 }}
        onSelect={onSelect}
        onChange={this.handleChange}
        placeholder="input here"
      >
        <textarea onKeyPress={this.handleKeyPress} style={{ height: 50 }}/>
      </AutoComplete>
    );
  },
});

ReactDOM.render(<Complete />, mountNode);