このフィドルでは、最初propsに、コンポーネントに渡されたチェックボックスに基づいてチェックボックスのリストがレンダリングされます。Re-renderボタンをクリックすると、同じコンポーネントが異なるセットのでレンダリングされますprops。
今、以下の手順に従ってください-
コンポーネントをnewpropsでレンダリングした後でも、チェックしたチェックボックスの状態は変更されません（2番目と3番目はチェックされたままです）
なぜそれが起こるのですか？チェックボックスの状態が持続しないように、新しい小道具のセットを使用してコンポーネントを再レンダリングするにはどうすればよいですか。
Reactの diffアルゴリズム は賢いからです。新しいコンポーネントを再レンダリングするための条件は次のとおりです。
これが実際の例です：http：//jsfiddle.net/lustoykov/ufLyy3vh/
事はある-あなたの再描画するためにどちらの条件 input要素が満たされているので、本当に古い再利用リアクト input。私がやったことは、各再レンダリングのkeyすべてのinput要素に対して新しいものを生成することです。Reactは、key変更とinputが正しいで再レンダリングされるため、これが新しい要素であると想定しますvalue。
Math.random()-それを再描画してくださいねえ、反応して、この要素が変更されている：あなたは別の鍵を生成させるために必要であり、それはようなものです。
ただし、 Reactの哲学に反しているため、さまざまなキーを使用したこのアプローチには反対します。毎回同じ要素を再レンダリングするのに、なぜReactを使用するのですか？これがReactのコアです。コンポーネントが同じ場合は再レンダリングしないでください。代わりに、onChangeハンドラーを使用して、入力コンポーネント全体を明示的に再レンダリングせずに、入力の値のみを更新する必要があります。
Reactフォームの操作方法をご覧ください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加