Reagieren Component - debounce

Question

Komponente auf reagieren, um eine Verzögerung zu schaffen Der Versuch, das Eingabefeld hat, dass Updates auf Änderung

Hier meine onChange Methode ist

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

und die react-bootstrap Komponente:

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

, also habe ich versucht, lodash _.debounce und Anwendung auf den Konstruktor

zu importieren 210

import debounce from 'lodash/debounce'; 


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

Ich bekomme keine Entprellung. Was fehlt mir hier?

Answer 1

Ich sehe, dass Sie this verwenden, also nehme ich an, dass FormControl innerhalb einer Renderfunktion Ihrer Stateful-Komponente ist. Stellen Sie in diesem Fall sicher, dass Ihre Bindung und Entprellung in constructor dieser Stateful-Komponente geschieht.

`` `

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

` ``

Answer 2

Bitte lesen Kommentar, die erklärt, wie das funktioniert

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} /> 
    } 
}