Блог

У меня есть следующий элемент, представляющий кнопку в опросе:

 <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 Функция запускает handleChange функцию и сохраняет некоторые данные по имени и значению кнопки:

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

Это работает нормально, но когда я нажимаю на один из дочерних элементов внутри кнопки (изображение или диапазон) handleChoiceClick , функция получает другое event.target в качестве параметра, а имя и значения не определены.

Каков наилучший способ решить эту проблему? Проверка event.target внутри handleChoiceClick или есть более простой способ?

Если вам нужен элемент, к которому вы подключили событие, используйте event.currentTarget вместо event.target . В вашем случае это всегда будет button элемент.

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

Это может дать вам имя и значение требуемой кнопки, хотя целью является любой другой элемент внутри кнопки.