反應油門不起作用

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