提交 84a05cbd 编写于 作者: K Kevin Lee 提交者: 陈帅

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

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

close #1703
上级 fc8c9a51
......@@ -21,3 +21,6 @@ yarn.lock
package-lock.json
*bak
jsconfig.json
# visual studio code
.history
\ No newline at end of file
......@@ -2,6 +2,8 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Input, Icon, AutoComplete } from 'antd';
import classNames from 'classnames';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import styles from './index.less';
export default class HeaderSearch extends PureComponent {
......@@ -29,14 +31,9 @@ export default class HeaderSearch extends PureComponent {
searchMode: this.props.defaultOpen,
value: '',
};
componentWillUnmount() {
clearTimeout(this.timeout);
}
onKeyDown = e => {
if (e.key === 'Enter') {
this.timeout = setTimeout(() => {
this.props.onPressEnter(this.state.value); // Fix duplicate onPressEnter
}, 0);
this.debouncePressEnter();
}
};
onChange = value => {
......@@ -45,6 +42,15 @@ export default class HeaderSearch extends PureComponent {
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 = () => {
this.setState({ searchMode: true }, () => {
if (this.state.searchMode) {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册