リセットしたい概念的にステートフルなコンポーネントが反応することがあります。理想的な動作は、古いコンポーネントを削除し、新しい元のコンポーネントを再読み込みすることと同等です。
Reactには、コンポーネントの明示的な状態を設定できるsetState
メソッドが用意されていますが、ブラウザーのフォーカスやフォームの状態などの暗黙的な状態は除外され、子の状態も除外されます。間接的な状態をすべて捕捉するのは難しい作業になる可能性があり、驚くべき状態のすべての新しいビットでモグラを叩くよりも、厳密かつ完全に解決したいと思います。
これを行うためのAPIまたはパターンはありますか?
Edit:this.replaceState(this.getInitialState())
アプローチを示し、this.setState(this.getInitialState())
アプローチと対比する簡単な例を作成しました: jsfiddle -replaceState
はより堅牢です。
言及した暗黙的なブラウザの状態と子の状態が確実にリセットされるようにするには、key
によって返されるルートレベルコンポーネントに render
属性 を追加します。変更されると、そのコンポーネントは破棄され、ゼロから作成されます。
render: function() {
// ...
return <div key={uniqueId}>
{children}
</div>;
}
個々のコンポーネントのローカル状態をリセットするショートカットはありません。
実際にはreplaceState
を避け、代わりにsetState
を使用する必要があります。
ドキュメントでは、replaceState
"Reactの将来のバージョンで完全に削除される可能性がある"と述べています。 replaceState
はReactの哲学とはまったく違うので、間違いなく削除されると思います。 Reactコンポーネントがスイスのナイフのように感じられるようにします。これは、Reactコンポーネントの自然な成長に対抗し、小さくなり、より目的に合わせて作成されます。
Reactで、一般化または専門化について誤解する必要がある場合:専門化を目指します。結果として、コンポーネントの状態ツリーには特定の節約が必要です(ただし、ブランドにまたがる新製品を足場にしている場合は、この規則を上手に破ることは問題ありません)。
とにかくこれがあなたのやり方です。上記のBenの(受け入れられた)答えに似ていますが、次のようになります。
this.setState(this.getInitialState());
また(Benも言ったように)「ブラウザの状態」をリセットするには、そのDOMノードを削除する必要があります。 vdomのパワーを活用し、そのコンポーネントに新しいkey
プロップを使用します。新しいレンダリングは、そのコンポーネントの卸売を置き換えます。
リファレンス: https://facebook.github.io/react/docs/component-api.html#replacestate
再初期化する必要がある要素にkey
属性を追加すると、props
またはstate
が要素に関連付けられるたびに、属性が再ロードされます。
key = {new Date()。getTime()}
以下に例を示します。
render() {
const items = (this.props.resources) || [];
const totalNumberOfItems = (this.props.resources.noOfItems) || 0;
return (
<div className="items-container">
<PaginationContainer
key={new Date().getTime()}
totalNumberOfItems={totalNumberOfItems}
items={items}
onPageChange={this.onPageChange}
/>
</div>
);
}