opti: 删掉注释

client/components/UsernameAutoComplete/UsernameAutoComplete.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Select } from 'antd';
+import { Select, Spin } from 'antd';
 import axios from 'axios';
 
 const Option = Select.Option;
@@ -42,55 +42,28 @@ class UsernameAutoComplete extends Component {
   }
 
   state = {
-    dataSource: []
-    // value: []
-    // uid: 0,
-    // username: ''
-    // changeName: ''
+    dataSource: [],
+    fetching: false
   }
 
   static propTypes = {
     callbackState: PropTypes.func
   }
 
-  // 改变本组件 state，并回调给父组件
-  // changeState = (value) => {
-  //   // 设置本组件 state
-  //   // this.setState({ value });
-  //   // 回调 将当前选中的uid和username回调给父组件
-  //   this.props.callbackState({ value });
-  // }
-
-  // 输入框中的值改变时
-  // onChange = (userName) => {
-  //   this.setState({
-  //     changeName: userName
-  //   });
-  // }
-
-  // process(value) {
-  //   return value.map(item => {
-  //     const index = item.index('_')
-  //     const id = item.substring(0, index);
-  //     const username = item.substring(index + 1);
-  //     return { id, username }
-  //   });
-  // }
 
   // 选中候选词时
   handleChange = (value) => {
-    // this.state.dataSource.forEach((item) => {
-    //   if (item.username === userName) {
-    //     this.changeState(item.id, item.username);
-    //   }
-    // });
-    // this.changeState({ value: this.process(value) })
+    this.setState({
+      dataSource: [],
+      fetching: false
+    });
     this.props.callbackState(value);
   }
 
   // 搜索回调
   handleSearch = (value) => {
     const params = { q: value}
+    this.setState({ fetching: true });
     axios.get('/api/user/search', { params })
       .then(data => {
         const userList = [];
@@ -105,44 +78,28 @@ class UsernameAutoComplete extends Component {
           this.setState({
             dataSource: userList
           });
-          // if (userList.length) {
-          //   // 每次取回搜索值后，没选择时默认选择第一位
-          //   // this.changeState(userList[0].id, userList[0].username);
-          // } else {
-          //   // 如果没有搜索结果，则清空候选 uid 和 username
-          //   // this.changeState(-1, '');
-          //   this.changeState([]);
-          // }
         }
       });
   }
 
   render () {
 
-    const { dataSource } = this.state;
+    const { dataSource, fetching } = this.state;
+    const children = dataSource.map((item, index) => (
+      <Option key={index} value={'' + item.id}>{item.username}</Option>
+    ))
 
     return (
-      // <AutoComplete
-      //   dataSource={this.state.dataSource.map(i => i.username)}
-      //   style={{ width: '100%' }}
-      //   onChange={this.onChange}
-      //   onSelect={this.onSelect}
-      //   onSearch={this.handleSearch}
-      //   placeholder="请输入用户名"
-      //   size="large"
-      // />
       <Select
         mode="multiple" 
         style={{ width: '100%' }}
         placeholder="请输入用户名"
+        notFoundContent={fetching ? <Spin size="small" /> : null}
         onSearch={this.handleSearch}
         onChange={this.handleChange}
-        onBlur={() => this.setState({dataSource: []})}
         size="large"
       >
-        {dataSource.map((item, index) => (
-          <Option key={index} value={'' + item.id}>{item.username}</Option>
-        ))} 
+        {children} 
       </Select>
     )
   }