Browse Source

fix: HeaderSearch 组件中添加对 enter 键的防抖处理

1. 删除无用 timeout 代码
2. 利用 lodash 中的 debounce 函数增加防抖处理
3. 添加 gitignore 规则,排除 VSC 插件生成的 .history 文件夹

close #1703
Kevin Lee 7 years ago
parent
commit
84a05cbd18
2 changed files with 15 additions and 6 deletions
  1. 3 0
      .gitignore
  2. 12 6
      src/components/HeaderSearch/index.js

+ 3 - 0
.gitignore

@@ -21,3 +21,6 @@ yarn.lock
 package-lock.json
 package-lock.json
 *bak
 *bak
 jsconfig.json
 jsconfig.json
+
+# visual studio code 
+.history

+ 12 - 6
src/components/HeaderSearch/index.js

@@ -2,6 +2,8 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import PropTypes from 'prop-types';
 import { Input, Icon, AutoComplete } from 'antd';
 import { Input, Icon, AutoComplete } from 'antd';
 import classNames from 'classnames';
 import classNames from 'classnames';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
 import styles from './index.less';
 import styles from './index.less';
 
 
 export default class HeaderSearch extends PureComponent {
 export default class HeaderSearch extends PureComponent {
@@ -29,14 +31,9 @@ export default class HeaderSearch extends PureComponent {
     searchMode: this.props.defaultOpen,
     searchMode: this.props.defaultOpen,
     value: '',
     value: '',
   };
   };
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-  }
   onKeyDown = e => {
   onKeyDown = e => {
     if (e.key === 'Enter') {
     if (e.key === 'Enter') {
-      this.timeout = setTimeout(() => {
-        this.props.onPressEnter(this.state.value); // Fix duplicate onPressEnter
-      }, 0);
+      this.debouncePressEnter();
     }
     }
   };
   };
   onChange = value => {
   onChange = value => {
@@ -45,6 +42,15 @@ export default class HeaderSearch extends PureComponent {
       this.props.onChange();
       this.props.onChange();
     }
     }
   };
   };
+  // NOTE: 不能小于500,如果长按某键,第一次触发auto repeat的间隔是500ms,小于500会导致触发2次
+  @Bind()
+  @Debounce(500, {
+    leading: true,
+    trailing: false,
+  })
+  debouncePressEnter() {
+    this.props.onPressEnter(this.state.value);
+  }
   enterSearchMode = () => {
   enterSearchMode = () => {
     this.setState({ searchMode: true }, () => {
     this.setState({ searchMode: true }, () => {
       if (this.state.searchMode) {
       if (this.state.searchMode) {