How to reload input value in React / Javascript with 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 debugger value of this.props.handlingAgent.email is actually asd, but in input is still old value. How to refresh that value without JQuery? Shouldn't it refresh automatically?

Answer 1

First, props are what's been passed onto you. View them as function parameters. The child really shouldn't go modify them since it breaks whatever assumption the parent has and makes your UI inconsistent.

Here, since the prop's passed onto you, you want to get a handler from parent that you can call to notify your change:

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's 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 does refresh "automatically", if you tell the parent to change. Instead of modifying what's been passed onto you, you use vanilla callbacks to the parent by passing it your new value. Then it flushes down the same value (or different, if fits) down to you.