如何'重置'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()