React onClick 自動更改子樣式

Question

你好，我真的找不到一種簡單和自動化的方法來讓它工作，我想在里面有很多帶有模態的 div，這樣我就可以點擊父級並更改它的子級的樣式，狀態無效，因為我必須為每個塊創建一個單獨的 state 我有大約 50 個和平，所以有沒有一些簡單的方法來寫像onClick={(e)=>e.firstChild.css(width:200px;height:200px;background:white)}像這樣的東西不安裝一些包和/或編寫大量代碼。 請至少給我一些東西來改變橙色立方體，方法是單擊紅色立方體而不單獨進行，這樣我就可以復制 4 個立方體並將它們設為 40，它仍然可以工作

 .big { width: 100px; height: 100px; background: red; margin: 10px; }.small { width: 50%; height: 50%; background: orange; }

 <div class="big"> <div class="small"></div> </div> <div class="big"> <div class="small"></div> </div> <div class="big"> <div class="small"></div> </div> <div class="big"> <div class="small"></div> </div>

Answer 1

這對於 javascript 非常簡單。您 select 每個元素 class big ，並添加一個事件偵聽器，該事件偵聽器適用於該節點的子節點。 主要問題是點擊small也會調用監聽器。 我展示的解決方案允許您獨立響應這兩個事件（如果您單擊small的 ，您會收到一條控制台消息），但根據您的需要還有其他解決方案。

 let bigs = document.querySelectorAll('.big'); bigs.forEach((el) => { el.addEventListener('click', (e) => { let small = e.target.querySelector('.small'); if (small === null){ console.log('clicked on small'); } else{ small.style.cssText = 'width:200px;height:50px;background:white'; } }); });

 .big { width: 100px; height: 100px; background: red; margin: 10px; }.small { width: 50%; height: 50%; background: orange; }

 <div class="big"> <div class="small"></div> </div> <div class="big"> <div class="small"></div> </div> <div class="big"> <div class="small"></div> </div> <div class="big"> <div class="small"></div> </div>