如何'重置'ReactJS元素？

Question

我正在尝试“重置”一个ReactJS元素。

在这种情况下，元素是页面内容的90％以上。

我正在使用replaceState将元素的状态替换为其初始状态。

不幸的是，具有自己的“状态”的子元素不会重置。 特别是，表单字段保留其内容。

有没有办法强制重新渲染元素，这也会导致子元素重新渲染，就好像页面刚刚加载一样？

Answer 1

向元素添加key会强制在该键更改时重新呈现元素（及其所有子元素）。

（我将'key'的值设置为简单地发送初始数据的时间戳。）

render: function() {
  return (
    <div key={this.state.timestamp} className="Commissioning">
      ...

Answer 2

this.replaceState(this.getInitialState())方法实际上不会重置输入的子this.replaceState(this.getInitialState()) ，如果这是你正在寻找的。 对于任何想要重置其表单字段的人来说，有一个标准的DOM reset()函数可以清除给定元素中的所有输入。

所以使用React，它会是这样的：

this.refs.someForm.getDOMNode().reset();

Doumentation：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

Answer 3

如果它是您要重置的表单，您只需使用它即可

// assuming you've given {ref: 'form'} to your form element
React.findDOMNode(this.refs.form).reset();

Answer 4

虽然我个人认为你不应该在大多数情况下将本地的临时组件状态（如正在进行的输入框）存储在一个集中的位置（如磁通存储），但这里可能有意义，具体取决于你拥有的数量，特别是因为它听起来像输入已经围绕它们进行了一些服务器交互/验证。 在这种情况下，将该状态推到组件层次结构或其他中心位置可能会有很大帮助。

我最喜欢的另一个想法是在可能需要重置本地状态的组件中使用mixin，并执行某种事件触发等，以实现它。 例如，您可以使用Node的EventEmitter或像EventEmitter3这样的库与这样的mixin（警告：未测试，也许最好这个伪代码:)

var myEmitter = new EventEmitter(); // or whatever

var ResetStateMixin = {
  componentWillMount: function() {
    myEmitter.on("reset", this._resetState);
  },

  componentWillUnmount: function() {
    myEmitter.off("reset", this._resetState);
  },

  _resetState: function() {
    this.replaceState(this.getInitialState());
  },

  triggerReset: function() {
    myEmitter.emit("reset");
  }
};

然后你可以在像这样的组件中使用它：

React.createClass({
  mixins: [ResetStateMixin],

  getInitialState: function() {
    return { ... };
  },

  onResetEverything: function() {
    // Call this to reset every "resettable" component
    this.triggerReset();
  }
});

这是非常基本和非常繁重的（你只能重置所有组件，每个组件调用replaceState(this.getInitialState())等）但这些问题可以通过扩展mixin来解决（例如，有多个事件发射器，允许特定resetState组件的resetState实现，等等。

值得一提的是， 你必须使用控制投入这个工作; 虽然您不需要将状态推到组件层次结构中，但您仍然希望所有输入都具有value和onChange （等）处理程序。

Answer 5

你也可以用

document.forms[0].reset()