onChange 事件不會在反應時觸發

Question

我的反應組件中有以下事件。

/**
 * 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,
            });
        });
    }
}

綁定到以下 input 元素，該元素是react-bootstrap一個組件。

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

但是當我嘗試在文本框中鍵入任何內容時，它只會觸發keyPress事件，而不是onSearchValueChange 。

我在這里做錯了什么？ 我已經綁定了構造函數中的所有事件。

Answer 1

您需要將.bind(this)添加到您的函數中。 簡單的方法，在標簽內：

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

Answer 2

只有當文本框元素失去焦點時才會觸發onChange 。 您可以查找oninput事件。

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