如何“重置”一个 ReactJS 元素？答案

【问题标题】：How to 'reset' a ReactJS element?如何“重置”一个 ReactJS 元素？
【发布时间】：2014-12-09 02:09:02
【问题描述】：

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

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

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

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

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

【问题讨论】：

您可能应该将状态作为道具传递给孩子
如果您使用 React 文档中提到的 controlled components 范例并将状态存储在您调用 replaceState 的层次结构的上层，您也可以“重置”表单的状态。
@ssorallen 输入嵌入在具有自己的功能和与服务器通信的元素中。例如一个“用户名”字段，它自己进行 AJAX 检查重复项，作为 field 验证的一部分。
我强烈建议您阅读 React 团队的 Flux architecture。让每个组件控制数据会让你感觉像是在与 React 对抗，就像这里的情况一样。将状态尽可能向上推送到组件层次结构中，并使用后代的回调来触发层次结构中的数据更改。

标签： javascript reactjs

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

记录：

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

【讨论】：

【解决方案3】：

如果是要重置的表格，直接用这个就可以了

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

【讨论】：

【解决方案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 实现，等等）。

值得注意的是，您确实必须使用受控输入才能使其工作；虽然您不需要将状态一直向上推送到组件层次结构，但您仍然希望所有输入都具有 value 和 onChange （等）处理程序。

【讨论】：

在什么情况下这比在元素中添加key更好？
@brandon，我可以请您在这里查看与“反应渲染”相关的问题：stackoverflow.com/questions/27913004/… 吗？
我同意你的助焊剂解决方案。每次表单更改（输入更改）时，我都会考虑触发操作的可能性。

【解决方案5】：

你也可以使用

document.forms[0].reset()

【讨论】：