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.

How can I make it work? I can understand why it's not letting me change the fields but what can I do to make it work?

I can't use the defaultValue because I will be changing these fields to some other ones

<input value={this.props.inputValue} onBlur={this.props.actions.updateInput} />

Answer 1

In order to have the input value editable you need to have an onChange handler for it that updates the value. and since you want to call a function onBlur, you have to bind that like onBlur={() => this.props.actions.updateInput()}

componentDidMount() {    this.setState({inputValue: this.props.inputValue}); } handleChange = (e) => {   this.setState({inputValue: e.target.value}); }  <input value={this.state.inputValue} onChange={this.handlechange} onBlur={() => this.props.actions.updateInput(this.state.inputValue)} /> 

Answer 2

Ways of doing this:

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

   <input placeholder='abc' onBlur={(e)=>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:

   <input value={this.props.inputValue} onChange={(e)=>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*/ }