我在 React 的一個組件中使用 map -
{ iconName.map(icon => (
<button onClick={clickHandler} key={icon.id} className='nav__tab'>
<Tabs iconName={icon.name} iconUrl={icon.src}/>
</button>
))}
在選項卡組件中，我有
<div className='tabs'>
<div>{ iconUrl }</div>
<span className='tabs__name'>{iconName}</span>
</div>
在 UI 上，它看起來像這樣 -
[
問題- 每當我點擊任何按鈕時，我都想區分點擊了哪個按鈕。就像當用戶點擊 Button1 時，我想知道 button1 被點擊了等等。我沒有在 clickHandler 函式上得到任何內部事件來區分按鈕。
我在事件中檢查了 event.target，但是當我單擊 SVG 圖示時，它控制臺為空。當我點擊 button1, button2 之類的文本時，它會給我想要的結果。唯一的問題是當我單擊 SVG 圖示時。
uj5u.com熱心網友回復：
這是target元素是 SVG 的問題，你可以使用closest方法，但更簡單的方法是，你可以將圖示作為第二個引數傳遞，你會得到 clicked icon。
{ iconName.map(icon => (
<button onClick={(e) => clickHandler(e, icon)} key={icon.id} className='nav__tab'>
<Tabs iconName={icon.name} iconUrl={icon.src}/>
</button>
))}
uj5u.com熱心網友回復：
將需要將事件傳遞給知道目標的函式。嘗試：
{ iconName.map(icon => (
<button onClick={(e) => clickHandler(e)} key={icon.id} className='nav__tab'>
<Tabs iconName={icon.name} iconUrl={icon.src}/>
</button>
))}
您也可以將第二個引數之類的圖示傳遞給函式。
uj5u.com熱心網友回復：
您在這里至少有 2 個選項可以得到您想要的：
- 無需檢查單擊事件是否與特定選擇器匹配，您可以使用該
closest()方法檢查它是否發生在選擇器中。 - 您可以禁用單擊 SVG，以便在父按鈕而不是 SVG 及其子元素上觸發事件。
svg { pointer-events: none;}
有關更多資訊，您可以參考：Detecting click events on SVGs with vanilla JS event delegate。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/522588.html