如何使用Virtual Dom重新加载输入值 / JavaScript

Question

我有重新加载输入值的问题。

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

之后我使用

this.props.handlingAgent.email = "asd"

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

Answer 1

首先，道具是传递给您的。将它们视为功能参数。孩子真的不应该修改它们，因为它会破坏父母的假设并使您的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} />;
  }
});

是的，如果您告诉父母更改，它确实会"自动"刷新。与其修改传递给您的内容，不如通过将其传递给父母的新价值来对父母使用香草回调。然后，它向您冲洗相同的值（或不同（如果适合））。