概念的にステートフルな React コンポーネントをリセットしたい場合があります。理想的な動作は、古いコンポーネントを削除し、新しい元のコンポーネントを再度追加するのと同じです。
React は、コンポーネント自身の明示的な状態を設定できるメソッドを提供しますsetStateが、ブラウザのフォーカスやフォームの状態などの暗黙的な状態は除外され、その子の状態も除外されます。すべての間接的な状態をキャッチするのは難しい作業になる可能性があり、予期しない新しい状態ごとにモグラ叩きをするよりも、厳密かつ完全に解決することを好みます。
これを行うための API またはパターンはありますか?
編集：this.replaceState(this.getInitialState())私は、このアプローチを説明し、このアプローチと対比する簡単な例を作成しましたthis.setState(this.getInitialState())。jsfiddle-replaceStateより堅牢です。
ベストアンサー1
あなたが言及した暗黙のブラウザ状態と子の状態がリセットされるようにするには、key属性によって返されるルートレベルのコンポーネントに変更が加えられるrenderと、そのコンポーネントは破棄され、最初から作成されます。
render: function() {
// ...
return <div key={uniqueId}>
{children}
</div>;
}
個々のコンポーネントのローカル状態をリセットするショートカットはありません。