如何使用虚拟DOM在React/Javascript中重新加载输入值？

我在重新加载输入值时遇到问题

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

---

在调试器中，this.props.handlingAgent.email的值实际上是asd，但在输入中仍然是旧值。如何在没有JQuery的情况下刷新该值？它不应该自动刷新吗？

首先，道具是传递给你的东西。将其视为功能参数。孩子真的不应该去修改它们，因为它打破了父母的任何假设，使你的UI不一致

在这里，由于道具已传递给您，您希望从父级获取一个处理程序，您可以调用该处理程序来通知您的更改：

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

var-App=React.createClass({
getInitialState:函数（）{
返回{inputValue:''}；
},
handleChange:函数（值）{
log（'从子级返回的值：'+值）；
这是我的国家({
输入值：值
});
},
render:function（）{
返回；
}
});
变量字段=React.createClass({
handleChange:函数（事件）{
//确保家长将onChange作为道具传递给您
//看到我在这里做了什么吗？这不是真正的DOM onChange。我们是手动的
//根据输入触发的实际onChange触发它`
this.props.onChange（event.target.value）；
},
render:function（）{
//为了避免混淆，我将这个值命名为'inputValue'
//从“onChange”中可以看出，最好将其命名为“value”`
返回；
}
});

---

所以是的，如果你告诉家长改变，它会“自动”刷新。不是修改传递给您的内容，而是通过将新值传递给父级来使用普通回调。然后它会将相同的值（或者不同的值，如果合适的话）向下刷新给您。

当您可以在onChange上使用props.onChange函数时，您为什么创建一个函数来调用props.onChange函数？像这样：onChange={this.props.onChange}

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