javascript - 我如何去抖动事件处理程序以与 lodash react ？

Question

import { debounce } from 'lodash';

// constructor
this.inputChangeHandler2 = debounce(this.inputChangeHandler, 100);

// html
<textarea onChange={this.inputChangeHandler2} />

当我尝试使用 lodash 去抖动功能时，这里没有任何反应。我在 inputChangeHandler 中放置了一个断点，如果从不命中。

Answer 1

不确定你有什么问题。

但在下面我编写了一个使用 lodash debounce 的代码片段。也许将此与您的进行比较，看看有什么不同。

class Test extends React.Component {
  constructor () {
    super();
    this.state = {lasttime: "?"}
  }
  changed () {
    this.setState({lasttime: new Date().getTime()});
  }
  render () {
    return (
      <React.Fragment>
        <textarea onChange={_.debounce(this.changed.bind(this), 100)}/>
        <div>{this.state.lasttime}</div>
      </React.Fragment>
    );
  }
}


ReactDOM.render(<React.Fragment>
  <Test/>
</React.Fragment>, document.querySelector('#mount'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>



<div id="mount"></div>