Jak "zresetować" element ReactJS?

Question

Próbuję "zresetować" element ReactJS.

W tym przypadku element stanowi 90% + zawartości strony.

Używam replaceState do zamiany stanu elementu na jego stan początkowy.

Niestety, podelementy, które mają swój "stan", nie są resetowane. W szczególności pola formularzy zachowują ich zawartość.

Czy istnieje sposób na wymuszenie ponownego renderowania elementu, który spowoduje również ponowne renderowanie pod-elementów, tak jakby strona właśnie została załadowana?

Answer 1

Dodanie do elementu elementu key powoduje, że element (i wszystkie jego elementy potomne) są ponownie renderowane po zmianie tego klucza.

(ustawić wartość „klucza” po prostu znacznika czasu, gdy początkowe dane zostały wysłane.)

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

Answer 2

Chociaż nie osobiście, że należy przechowywać lokalnych, stanowych komponentów tymczasowy (jak pola wprowadzania w toku) w scentralizowanej lokalizacji (jak w przypadku magazynu strumieniowego) w większości przypadków, tutaj może mieć sens, w zależności od tego, ile masz, szczególnie, że wygląda na to, że dane wejściowe mają już trochę interakcji/sprawdzania serwera wokół nich. Przeniesienie tego stanu do hierarchii komponentów lub do innej centralnej lokalizacji może bardzo pomóc w tym przypadku.

Jedną z alternatywnych idei z mojej głowy jest użycie mixinu w komponentach, które mogą wymagać zresetowania stanu lokalnego i zrobienia pewnego rodzaju wyzwalania zdarzeń itp., Aby to się stało. Na przykład, można użyć węzła EventEmitter lub bibliotekę jak EventEmitter3 z wstawek tak (ostrzeżenie: nie testowane, może najlepiej to jako Pseudokod :)

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"); 
    } 
}; 

następnie można użyć go w składniki tak:

React.createClass({ 
    mixins: [ResetStateMixin], 

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

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

Jest to bardzo prosty i bardzo ciężki w obsłudze (można zresetować tylko wszystkie komponenty, każdy składnik wywołuje replaceState(this.getInitialState()), itp.), Ale problemy te można rozwiązać przez rozszerzenie nieco mixin (np. O wielu emitujących zdarzenia, pozwalając na komponent specyficzne implementacje resetState i tak dalej).

Warto zauważyć, że musisz do użyć kontrolowanych danych wejściowych, aby to zadziałało; podczas gdy nie będziesz musiał wciskać swojego stanu aż do hierarchii komponentów, nadal będziesz chciał, aby wszystkie twoje dane wejściowe posiadały procedury obsługi value i onChange (itp.).

Answer 3

Metoda this.replaceState(this.getInitialState()) w rzeczywistości nie resetuje dzieci, które są wejściowe, jeśli tego właśnie szukasz. Dla każdego, kto chce tylko zresetować pola formularza, dostępna jest standardowa funkcja DOM reset(), która usunie wszystkie wejścia w danym elemencie.

Więc z React, że to będzie coś takiego:

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

Doumentation:

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

Answer 4

Jeśli jest to forma chcesz zresetować, po prostu można użyć tej