How to reload input value in React / Javascript using Virtual DOM?

Question

I have a problem with reload input value.

<input type="email" ref="email" id="email" value={this.props.handlingAgent.email}/> 

after that i use

 this.props.handlingAgent.email = "asd" 

In the debugger, the value of this.props.handlingAgent.email is actually equal to asd, but the input is still the old value. How to update this value without jQuery? Should it not automatically update?

Answer 1

First, the pillars are what has been conveyed to you. View them as function parameters. The child really should not change them, because it violates all the assumptions that the parent has and makes your user interface inconsistent.

Here, since prop passed you, you want to get a handler from the parent, which you can call to notify about this:

 var App = React.createClass({ getInitialState: function() { return {inputValue: ''}; }, handleChange: function(value) { console.log('Value gotten back from the child: ' + value); this.setState({ inputValue: value }); }, render: function() { return <Field onChange={this.handleChange} inputValue={this.state.inputValue} />; } }); var Field = React.createClass({ handleChange: function(event) { // Make sure the parent passes the onChange to you as a prop // See what I did here? It not the actual DOM onChange. We're manually // triggering it based on the real onChange fired by the `input` this.props.onChange(event.target.value); }, render: function() { // I named the value prop `inputValue` to avoid confusion. But as you can // see from `onChange`, it'd be nicer to name it just `value` return <input value={this.props.inputValue} onChange={this.handleChange} />; } }); 

So yes, it is updated "automatically" if you tell your parents to change. Instead of changing what was passed to you, you use vanilla callbacks to your parents, passing it a new value. Then it resets the same value (or another, if appropriate) to you.