React,Redux初心者です。
詳細は違いますがイメージはこのようなものを作っています。
親コンポーネント内で以下のようにRenderChildコンポーネントを複数描画します。
javascript
1 for(var i=10; i>=0; i--){ 2 List.push(<RenderChild {...this.props}/>) 3 }
次にRenderChild内で
javascript
1hoge(){ 2 this.setState({ 3 hoge: !this.state.hoge, 4 }) 5} 6 7... 8 9<button onClick={()=>this.hoge}>toggle</button>
のようにすると、このtoggleは10個表示されているRenderChild内のクリックした一つの要素に適用されます。
この動きが理想なのですが、この挙動のReduxでの実装方法がわかりません。
一つのものをクリックすると他のもの全てにtoggleが適用されるようになってしまっています。
【追記】
各 RenderChild の state をリストで保持したいのでしょうか?
恐らくそうだと思います。(リストにするのが最適なのかどうかもわかっていません。すいません)
実装したいもののスクショです。
2つ並んでいる長方形の1つ1つが子コンポーネントです。
画像のように、一つのハートマークをクリックすると、両方共に反映されています。
実際は、上のハートマークをクリックすると上だけ、下だと下だけ。
というようにしたいと考えています。
コレの解決方法をご存じの方がいらっしゃれば教えていただけないでしょうか。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー