React Throttle不工作

Question

我是一个反应的新手，我试图做一个“搜索”，我试图限制输入。但它不起作用。请纠正我哪里做错了？

 render() {
    const { value, suggestions } = this.state;
    const inputProps = {
      placeholder: 'Try me! Search for iPad, iPhone',
      value,
      onChange: throttle(150, this.onChange), //DOESNT WORK :(
    };

    return (
      <Row>
        <Col grow={false} padding={0}>
          <i className='ion-ios-search-strong'></i>
        </Col>
        <Col padding={0}>
          <Autosuggest suggestions={suggestions}
              onSuggestionsUpdateRequested={this.onSuggestionsUpdateRequested}
              getSuggestionValue={this.getSuggestionValue}
              renderSuggestion={this.renderSuggestion}
              inputProps={inputProps} />
        </Col>
      </Row>
    );
  }

  onChange(event, { newValue }) {

    //_.throttle( () => {  this.getValue(newValue) } , 500 );  //DOESNT WORK EITHER :(

    this.getValue(newValue);

    this.setState({
      value: newValue
    });
  }

Answer 1

如果不知道用来节流的库，这是非常困难的，但我猜下面是运行节流函数并将结果存储在"onChange“方法中。这可能不是你想要做的。

onChange: throttle(150, this.onChange)

如果你这样做了，它可能会起作用。

onChange: () => throttle(150, this.onChange)

另一种选择是创建一个帮助器函数并调用它，在构造函数中进行绑定以正确地将其连接起来。

constructor() {
   super();
   this.onChange = this.onChangeWorker.bind(this);
}

onChangeWorker() {
   throttle(150, () => {
      // do work
   }
}

如果这仍然不起作用，请查看以下内容。https://www.npmjs.com/package/react-throttle