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

Ways of doing this:

1. Do not assign value property to input field, whenever onblur method gets trigger, hit the api like this:

   this.props.actions.updateInput(e.target.value)} />
   

Update value to server:

updateInput(value){
    /*update the value to server*/
}

2. If you are assigning the value property to input field by this.props.inputValue, then use onChange method, pass the value back to parent component, change the inputValue by using setState in parent, it will work like this:

   this.props.onChange(e.target.value)} onBlur={()=>this.props.actions.updateInput} />
   

In Parent Component:

onChange(value){
    this.setState({inputvalue:value});
}

Update value to server:

updateInput(value){
    /*update the value to server*/
}