Почему не всегда срабатывает e.target.dataset?

Question

[Pogran]

У меня есть вот такой код в render

<a title={title} key={keyVal} onClick={this.onClick} type="button" className={`control-structure pull-right ${className}`}>
				<i data-key={keyVal} data-value={valueVal} data-level={level} className={`fa ${parentClassName}`} aria-hidden="true"/>
			</a>

и вот само событие onClick

onClick(e) {
		e.preventDefault();
		console.log( e.target.dataset.level);
	}

bind на событие я делаю в constructor.

смысл в том что не всегда dataset тянет данные. В 10% случаев бывает промах, т.е консоль выводит undefined, хотя в data-level есть параметры. Как можно решить эту проблему? Или может есть какой альтернативный способ передавать параметры

Answer 1

[Максим]

У вас клик на ссылке, а data-* на элементе <i>
Когда кликаете по ссылке - e.target = ссылка и у нее нет data-*
Когда в клике попадаете на i = все хорошо.

Comments

[Pogran]

ага я понял про что Вы. А как сделать чтобы клик постоянно происходил по одному из элементов? а то у меня сейчас происходит так что иногда на тег 'а' происходит клик.

[Максим]

вынести data-* в тэг < a >, либо сделать элемент < i > равным по размеру < a >

[Pogran]

Максим: спасибо решил проблему. поменял чуть стили и всё как надо стало работать.