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

绑定到以下输入元素，该元素是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

onChange事件没有因为反应而被解雇

2 个答案: