onChange vs onKeyPress for input in React

Question

I have an input form, and when you press enter I want it to call a function. I was wondering what "the right" way of doing this is.

Right now I have an input looking like this:

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

And two functions that look like this

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

Another solution was to point both onChange and onKeyPress to the same function and write it like

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

If I remove the onChange-binding the input-field stops updating itself on input (not entirely sure why this is) and if I remove the onKeyPress-binding the event-object no longer has a key-property.

My current solution works, but it still feels like a hack.

Answer 1

I am new to React, so bear with me. ;)

If you use the state in the enter handler exclusively, you don’t need the state at all.

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

If you use it for other things, I would recommend something like this:

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

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

There is no need to change the state in handleEnter, because the state already reflects the current value.