update searchinput

src/components/SearchInput/index.js

@@ -3,13 +3,43 @@ import { Button, Input } from 'antd';
 
 import styles from './index.less';
 
-export default ({ onSearch = () => ({}), text = '搜索', ...reset }) => (
-  <div className={styles.search}>
-    <Input
-      placeholder="请输入"
-      size="large"
-      {...reset}
-      addonAfter={<Button onClick={onSearch} type="primary">{text}</Button>}
-    />
-  </div>
-);
+export default class SearchInput extends React.Component {
+  state = {
+    value: this.props.defaultValue,
+  }
+
+  handleOnChange = (e) => {
+    this.setState({
+      value: e.target.value,
+    });
+  }
+
+  handleOnSearch = () => {
+    if (this.props.onSearch) {
+      this.props.onSearch(this.state.value);
+    }
+  }
+
+  handleOnKey = (e) => {
+    if (e.keyCode === 13) {
+      this.handleOnSearch();
+    }
+  }
+
+  render() {
+    const { text = '搜索', reset } = this.props;
+    return (
+      <div className={styles.search}>
+        <Input
+          onKeyDown={this.handleOnKey}
+          placeholder="请输入"
+          size="large"
+          {...reset}
+          value={this.state.value}
+          onChange={this.handleOnChange}
+          addonAfter={<Button onClick={this.handleOnSearch} type="primary">{text}</Button>}
+        />
+      </div>
+    );
+  }
+}

src/components/SearchInput/index.less

@@ -1,5 +1,4 @@
 @import "~antd/lib/style/themes/default.less";
-@import "../../utils/utils.less";
 
 .search {
   display: inline-block;
@@ -23,23 +22,3 @@
     height: 40px;
   }
 }
-
-@media screen and (max-width: @screen-sm) {
-  .search {
-    :global {
-      .ant-input-group .ant-input {
-        width: 300px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xs) {
-  .search {
-    :global {
-      .ant-input-group .ant-input {
-        width: 200px;
-      }
-    }
-  }
-}