onChange event is not getting fired on react

Question

I've the following events in my react component.

/**
 * On search change handler.
 * @param {any} e Event object
 * @memberof Login
 */
onSearchValueChange(e) {
    this.setState({
        search: e.target.value,
    });
}

/**
 * Render the token view if present.
 * @param {object} e Event object.
 */
keyPress(e) {
    if (e.keyCode === 13 && this.state.search !== '') {
        e.preventDefault();
        searchPackage(this.state.search).then((response) => {
            this.setState({
                redirect: true,
                redirectOnSearch: true,
                searchResults: response.data,
            });
        });
    }
}

bound to the following input element which is a component from react-bootstrap .

<FormControl key='search' id='search' type='text' placeholder='Search Packages' value={this.state.search} onKeyDown={this.keyPress} onChange={this.onSearchValueChange} />

But when I try to type anything in the textbox, it only fires the keyPress event, but not the onSearchValueChange .

What am I doing wrong here? I've bind all the events in the constructor.

Answer 1

You need to add the .bind(this) to your functions. Simple way, inside the tags:

<FormControl ... onKeyDown={this.keyPress.bind(this)} 
 onChange={this.onSearchValueChange.bind(this)} />

Answer 2

onChange will be triggered only when the textbox element loses focus. You may look for the oninput event.

https://www.w3schools.com/jsref/event_oninput.asp