javascript - onChange 事件不会在 react 时被触发

Question

我的 react 组件中有以下事件。

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

绑定(bind)到以下输入元素，该元素是来自 react-bootstrap 的组件。

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

但是当我尝试在文本框中输入任何内容时，它只会触发 keyPress 事件，而不触发 onSearchValueChange。

我在这里做错了什么？我已经在构造函数中绑定(bind)了所有事件。

Answer 1

您需要将 .bind(this) 添加到您的函数中。简单的方法，在标签内:

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