Реагировать компонент - дребезг

Question

Попытки создать задержку реакции компонент, который имеет поле ввода, что обновления на изменениях

Вот мой метод OnChange

handleOrderQtyKeyPress (e) { 
    var regex = /[^0-9]/ 
    if (e.key.match(regex)) { 
     e.preventDefault(); 
    } 
    if (this.state.orderQtyValue.toString().length == 3) { 
     e.preventDefault(); 
    } 
} 

и react-bootstrap компонент:

<FormControl 
    type='number' 
    min='0' 
    value={this.state.orderQtyValue} 
    onChange={this.handleOrderQtyChange} 
    onKeyPress={this.handleOrderQtyKeyPress} 
    style={styles.orderQtyValue} 
    /> 

, поэтому я попытался импортировать lodash _.debounce и применить его к конструктору

import debounce from 'lodash/debounce'; 


this.handleOrderQtyKeyPress = _.debounce(this.handleOrderQtyKeyPress.bind(this),1000); 

Я не получаю отговорки. Что мне здесь не хватает?

Answer 1

Я вижу, что вы используете this, поэтому я предполагаю, что FormControl находится внутри функции рендеринга вашего компонента с состоянием. В этом случае убедитесь, что ваше связывание и debouncing происходит в constructor этого компонента с состоянием.

`` `

const Component extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleOrderQtyKeyPress = _.debounce(this.handleOrderQtyKeyPress.bind(this), 1000); 
    } 
} 

` ``

Answer 2

Пожалуйста, прочтите комментарий, который объясняет, как это работает

class Input extends Component { 
    static propTypes = { 
     onChange: PropTypes.func.isRequired, 
     value: React.PropTypes.oneOfType([ 
      React.PropTypes.string, 
      React.PropTypes.number, 
     ]), 
    } 

    state = { 
     value: '', 
    } 

    // When component receives updated `value` from outside, update internal `value` state. 
    componentWillReceiveProps(nextProps) { 
     this.setState({ value: nextProps.value }); 
    } 

    // Store updated value localy. 
    onChange = (event) => { 
     this.setState({ value: event.target.value }); 
    } 

    onBlur = (event) => { 
     // Trigger change to external env. 
     this.props.onChange(this.state.value); 
     // Also, don't forget to call `onBlur` if received from parent. 
     if (this.props.onBlur) { 
      this.props.onBlur(event); 
     } 
    } 

    render() { 
     return <input {...this.props} value={this.state.value} onChange={this.onChange} onBlur={this.onBlur} /> 
    } 
}