Question

154

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

rated 0 times [ 157] [ 3] / answers: 1 / hits: 118563 / 7 Years ago, tue, january 24, 2017, 12:00:00

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} />

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tristab

Add To Favorites

Follow

Total Points: 735

Total Questions: 106

Total Answers: 96

Location: Grenada

Member since Sun, Dec 20, 2020

3 Years ago

tristab questions

1 How to use the new Webpack devServer configuration?

Sat, Sep 25, 21, 00:00, 3 Years ago

1 Discord.JS get member from user ID

Sun, Jan 31, 21, 00:00, 3 Years ago

1 React: Passing Props not working. What am I missing?

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How can i extract vowels in a Javascript String?

Fri, Oct 23, 20, 00:00, 4 Years ago

1 Jest encountered an unexpected token when testing a Vue single file component

Sat, May 23, 20, 00:00, 4 Years ago

View All

answered 7 Years ago alfredoc · Accepted Answer

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