Browse Source

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

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

close #1703
pull/1723/head
Kevin Lee 8 years ago
committed by 陈帅
parent
commit
84a05cbd18
  1. 3
      .gitignore
  2. 18
      src/components/HeaderSearch/index.js

3
.gitignore

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

18
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.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 {
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) {

Loading…
Cancel
Save