Javascript 如何'；重置'；一个JS元素？

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

在这种情况下，元素占页面内容的90%以上

我使用

replaceState

将元素的状态替换为其初始状态

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

---

是否有办法强制重新呈现元素，这也会导致子元素重新呈现，就像页面刚刚加载一样？

向元素添加

键

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

（我将“key”的值设置为发送初始数据时的时间戳。）

render:function（）{
返回(
...

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

我脑海中的另一个想法是，在可能需要重置本地状态的组件中使用mixin，并执行某种事件触发等来实现它。例如，您可以使用节点的

EventEmitter

或类似的库来实现这样的mixin（警告：未测试，最好将其作为伪代码：）

然后您可以在如下组件中使用它：

React.createClass({
  mixins: [ResetStateMixin],

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

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

这是一个非常基本且非常繁重的过程（您只能重置所有组件，每个组件调用

replaceState（This.getInitialState（））

，等等），但这些问题可以通过稍微扩展mixin来解决（例如，具有多个事件发射器，允许特定于组件的

resetState

实现，等等）

---

值得注意的是，您确实必须使用受控输入才能工作；虽然您不需要将状态一直推到组件层次结构上，但您仍然希望所有输入都具有

值
和
onChange
（等）处理程序。
this.replaceState（this.getInitialState（））
方法实际上不会重置作为输入的子项（如果您正在寻找的话）。对于希望只重置其表单字段的人，有一个标准的DOM
reset（）
函数可以清除给定元素中的所有输入

因此，如果使用React，它将是这样的：

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

催眠：

如果是要重置的表单，只需使用此

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

您还可以使用document.forms[0].reset（）
您可能应该将状态作为道具传递给孩子们如果您使用React文档中提到的范例，并将状态存储在调用的层次结构的最高层
replaceState
，您可以“重置”表单的状态以及输入被嵌入到具有自身功能和与服务器通信的元素中。例如“用户名”字段，作为字段验证的一部分，它自己进行AJAX检查以检查重复项。我强烈建议您通读React团队的。让每个组件控制数据会让您感觉像是在对抗React，就像这里的情况一样。将状态推到组件层次结构的尽可能高的位置，并使用从子代到t的回调装配工数据在层次结构中发生变化。在什么情况下，这比向元素添加
键
更好？@brandon，我可以请你在这里看一看与“react render”相关的问题吗：？我同意你关于通量解决方案的看法。只是在我的脑海中权衡每次表单变化时触发动作的可能性（输入发生了变化）。
document.forms[0].reset()
// assuming you've given {ref: 'form'} to your form element
React.findDOMNode(this.refs.form).reset();

document.forms[0].reset()