Question

我是一个新手做出反应，我正在努力做一个＆＃34;搜索＆＃34;而且我正在尝试限制输入。但它不起作用。请在我错误的地方纠正我？

 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

React Throttle不起作用

1 个答案: