React 单元测试不会更新 <input> 值

Question

更新：为此@React: <input> value never updated in unit test创建了一个新的、更清晰的问题

---

我有一个类似这样的 React 组件：

var Example = React.createClass({
  render: function() {
    return <input type="text"
      onChange  = {this.props.onChange}
      value     = {this.props.text}
      data-what = {this.props.text} />;
  }
});

我有一个单元测试，我这样做：

1. 使用TestUtils.renderIntoDocument 创建组件，使用“FIRST”作为state.text。
2. 使用Simulate.change 将文本更改为“SECOND”。

这是最奇怪的事情。如果我在每一步之后转储 HTML，我希望看到：

<input type="text" data-what="FIRST" value="FIRST">
<input type="text" data-what="SECOND" value="SECOND">

……但出于某种奇怪的原因，我不断得到以下结果：

<input type="text" data-what="FIRST" value="FIRST">
<input type="text" data-what="SECOND" value="FIRST">

在第二次转储中，value 仍然是“FIRST”。什么？？

很明显管道正在工作，因为data-what 已正确更改为“SECOND”，但为什么不是该值？很困惑。

Answer 1

这是因为您使用的是Controlled Component。

带有value 集的<input> 是一个受控组件。在受控的<input> 中，渲染元素的值将始终反映value 属性。

这意味着如果要更改文本，则必须更改提供给<input> 的value 属性。更改事件不会更改值，用户也无法这样做。

我怀疑您正在寻找的是 defaultValue 道具。

  render: function() {
    return <input type="text"
      onChange     = {this.onChange}
      defaultValue = {this.text}
      data-what    = {this.text} />;
  }