Reactjs Lodash 使用 React 输入debounce

发布于03月30日

我正在try 将lodashgo Bouncing添加到搜索函数中，该函数是从input onChange事件调用的.下面的代码生成一个类型错误"function is expected"，我理解这一点，因为lodash需要一个函数.正确的方法是什么？它可以全部内联完成吗？到目前为止，我几乎try 了所有的例子，但都无济于事.

search(e){
 let str = e.target.value;
 debounce(this.props.relay.setVariables({ query: str }), 500);
},

推荐答案

debounce函数可以在JSX中内联传递，也可以直接设置为类方法，如下所示:

search: _.debounce(function(e) {
  console.log('Debounced Event:', e);
}, 1000)

Fiddle: https://jsfiddle.net/woodenconsulting/69z2wepo/36453/

如果您使用的是es2015+，您可以直接在constructor或componentWillMount这样的生命周期方法中定义go 盎司方法.

Examples:

class DebounceSamples extends React.Component {
  constructor(props) {
    super(props);

    // Method defined in constructor, alternatively could be in another lifecycle method
    // like componentWillMount
    this.search = _.debounce(e => {
      console.log('Debounced Event:', e);
    }, 1000);
  }

  // Define the method directly in your class
  search = _.debounce((e) => {
    console.log('Debounced Event:', e);
  }, 1000)
}