Updating a React Input text field with the value on onBlur event

Question

I have the following input field as below. On blur, the function calls a service to update the input value to the server, and once that\'s complete, it updates the input field.

Answer 1

You will want to bind a onChange event to update your state. Make sure to use the bind method in your constructor so that you do not lose the 'this' context within your onChange event handler method. You will then want to pass the value back to your update input method onBlur. Something like this:

constructor(props) {
  super(props);

  this.state = {
    inputValue: props.inputValue
  };
  this.handleChange = this.handleChange.bind(this);
};

handleChange = (e) => {
  this.setState({inputValue: e.target.value});
}

 this.props.actions.updateInput(this.state.inputValue)} 
/>