Commit 84a05cbd authored by Kevin Lee's avatar Kevin Lee Committed by 陈帅

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

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

close #1703
parent fc8c9a51
...@@ -21,3 +21,6 @@ yarn.lock ...@@ -21,3 +21,6 @@ yarn.lock
package-lock.json package-lock.json
*bak *bak
jsconfig.json jsconfig.json
# visual studio code
.history
\ No newline at end of file
...@@ -2,6 +2,8 @@ import React, { PureComponent } from 'react'; ...@@ -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 { ...@@ -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.debouncePressEnter();
this.props.onPressEnter(this.state.value); // Fix duplicate onPressEnter
}, 0);
} }
}; };
onChange = value => { onChange = value => {
...@@ -45,6 +42,15 @@ export default class HeaderSearch extends PureComponent { ...@@ -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) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment