單擊按鈕子元素時錯誤的 event.target

Question

我有以下元素表示調查中的按鈕：

<button name={id} value={value} onclick={handleChoiceClick} className="choice__button">
   <img src={image} className="choice__button-image"/>
   <span className="choice__button-title">Button title</span>
</button>

handleChoiceClick function 觸發handleChange function 並通過按鈕的名稱和值存儲一些數據：

const handleChoiceClick = (e) => {
   handleChange(e.target.name, e.target.value);
};

這工作正常，但是當我單擊按鈕（圖像或跨度）內的一個子元素時， handleChoiceClick function 將另一個 event.target 作為參數，並且名稱和值未定義。

解決此問題的最佳方法是什么？ 檢查handleChoiceClick內的event.target還是有更簡單的方法？

Answer 1

如果您想要掛鈎事件的元素，請使用event.currentTarget而不是event.target 。 在您的情況下，這將始終是button元素。

Answer 2

const handleChoiceClick = (e) => {   
   var buttonElement = e.target.closest('.choice__button')
   handleChange(buttonElement.name, buttonElement.value);
};

這可以為您提供所需按鈕的名稱和值，盡管目標是按鈕內的任何其他元素。