onChange, после чего против метода onkeypress для ввода в React


У меня есть форма ввода, и при нажатии Enter я хочу, чтобы вызвать функцию. Мне было интересно, что такое "правильный" способ делать это.

Сейчас у меня вклад в таком виде:

<input 
    type="text" 
    placeholder="Enter key words" 
    value={this.state.value}
    onChange={this.handleChange} 
    onKeyPress={this.handleEnter}
/>

И две функции, которые выглядят следующим образом

handleChange(event) {
    this.setState({value: event.target.value});
}

handleEnter(event) {
    if (event.key === 'Enter') {
        this.setState({value: event.target.value},function(){
            this.props.theFunction(this.state.value);
        });
    }
}

Другое решение было указывать как onChange, после чего и метода onkeypress одну и ту же функцию и написать ее как

handleChangeAndEnter(event) {
    if (event.key === 'Enter') {
        this.setState({value: event.target.value},function(){
            this.props.theFunction(this.state.value);
        });
    } else {
        this.setState({value: event.target.value});
    }
}

Если я удалить onChange, после привязки ввода-поле перестает обновляться, сам на входе (не совсем понимаю, зачем это) и если я удалю метода onkeypress-привязка события-объекта больше нет ключ-собственность.

Мое текущее решение работает, но он по-прежнему чувствует, как взломать.



Комментарии
1 ответ

Я новичок реагировать, так, медведь со мной. ;)

Если вы используете государства в введите обработчик исключительно, вы не нужны государству вообще.

handleChangeAndEnter(event) {
if (event.key !== 'Enter') { return; }
this.props.theFunction(event.target.value);
}

Если вы используете его для других вещей, я бы порекомендовал что-то вроде этого:

handleChange(event) {
this.setState({ value: event.target.value });
}

handleEnter(event) {
if (event.key !== 'Enter') { return; }
this.props.theFunction(this.state.value);
}

Нет необходимости, чтобы изменить состояние в handleEnterпотому что государство уже отражает текущую стоимость.

0
ответ дан 28 марта 2018 в 06:03 Источник Поделиться