fix InputAutoComplete

src/components/InputAutoComplete/InputAutoComplete.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { AutoComplete } from 'antd'
+
+class InputAutoComplete extends Component {
+  static propTypes = {
+    value: PropTypes.string,
+    placeholder: PropTypes.string,
+    disabled: PropTypes.bool,
+    dataSource: PropTypes.array,
+    onChange: PropTypes.func,
+  }
+
+  static defaultProps = {
+    disabled: false,
+    placeholder: '请输入邮箱',
+    dataSource: ['newband.com', '163.com', 'qq.com', 'sina.com'],
+  }
+
+  state = {
+    value: '',
+    dataSource: [],
+  }
+
+  componentWillReceiveProps (nextProps) {
+    // Should be a controlled component.
+    if ('value' in nextProps) {
+      const value = nextProps.value
+      let dataSource
+      if (!value || value.indexOf('@') >= 0) {
+        dataSource = []
+      } else {
+        dataSource = nextProps.dataSource.map(domain => `${value}@${domain}`)
+      }
+      this.setState({ value, dataSource })
+    }
+  }
+
+  handleChange = (value) => {
+    if (!('value' in this.props)) {
+      this.setState({ value })
+    }
+    const onChange = this.props.onChange
+    if (onChange) {
+      onChange(value)
+    }
+  }
+
+  render () {
+    const { placeholder, disabled } = this.props
+    const { value, dataSource } = this.state
+
+    return (
+      <AutoComplete
+        backfill
+        dataSource={dataSource}
+        onChange={this.handleChange}
+        placeholder={placeholder}
+        value={value}
+        disabled={disabled}
+      />
+    )
+  }
+}
+
+export default InputAutoComplete

src/components/InputAutoComplete/index.js

@@ -0,0 +1 @@
+export InputAutoComplete from './InputAutoComplete'

src/components/InputAutoComplete/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "InputAutoComplete",
+  "version": "0.0.1",
+  "private": true,
+  "main": "./InputAutoComplete.js"
+}

src/components/index.js

@@ -1,6 +1,6 @@
 export DataTable from './DataTable'
 export DropMenu from './DropMenu'
-export InputEmail from './InputEmail'
+export InputAutoComplete from './InputAutoComplete'
 export MediaPlayer from './MediaPlayer'
 export SearchGroup from './Search'
 export UploadFile from './UploadFile'

src/routes/account/Admin/ModalForm.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Form, Input, Radio, Modal, Icon, Select } from 'antd'
+import { InputAutoComplete } from 'components'
 import { validPhone } from 'utils/utilsValid'
 
 const FormItem = Form.Item
@@ -114,8 +115,7 @@ const ModalForm = ({
                 message: '邮箱格式不正确',
               },
             ],
-          })(<Input type="email" />)}
-          {/* (<InputEmailComplete/>)} */}
+          })(<InputAutoComplete />)}
         </FormItem>
         <FormItem label="角色：" hasFeedback {...formItemLayout}>
           {getFieldDecorator('roleId', {

src/routes/account/User/ModalForm.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Form, Input, Modal, Icon } from 'antd'
+import { InputAutoComplete } from 'components'
 import { validPhone } from 'utils/utilsValid'
 
 const FormItem = Form.Item
@@ -91,7 +92,7 @@ const ModalForm = ({
                 message: '邮箱格式不正确',
               },
             ],
-          })(<Input />)}
+          })(<InputAutoComplete />)}
         </FormItem>
       </Form>
     </Modal>