Реагируйте TypeScript получить атрибут данных из события клика

Question

Итак, у меня есть компонент React с кнопкой, которая имеет обработчик щелчков, который использует атрибут data- *. Если бы это было просто React, то я знаю, как получить значение из атрибута data- *. Однако я учусь использовать TypeScript, поэтому я не знаю, как получить доступ к этому атрибуту. Итак, каков наилучший способ получить доступ к атрибуту data- * с использованием TypeScript?

Это мой код JSX для кнопки:

<button type="button" className="NavLink" data-appMode={ AppMode.MAIN } onClick={ this.handleAppModeClick.bind(this) }>Main</button>

Это мой обработчик для события click:

handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
    // What code should go here to access the data-appMode attribute?
}

Answer 1

Используйте e.currentTarget , а затем используйте стандартный метод HTML getAttribute. Принуждение не требуется.

const appMode = e.currentTarget.getAttribute('data-appmode');

(обратите внимание на строчную букву в имени атрибута, чтобы избежать предупреждений от реакции)

currentTarget уже введен правильно.

Если вы читаете В определениях типов событий React вы можете видеть, что MouseEvent расширяет SyntheticEvent, что расширяет BaseSyntheticEvent, включая, среди прочего, свойства target и currentTarget. Предоставленный вами тип HTMLElement применяется к currentTarget, поэтому у вас есть доступ ко всем нужным материалам. Если вы используете target, вы получите ошибку компиляции о том, что getAttribute недопустимо для типа EventTarget.

В чем разница?

currentTarget - это элемент, гдевы кладете свой обработчик, onClick. target - это то место, откуда изначально произошло событие ( больше здесь ). Это не обязательно то же самое, потому что события всплывают. См. PR, на который есть ссылка в файле определений типов , для полного обсуждения того, почему они напечатаны по-разному.

Answer 2

Скорее всего, вам придется использовать синтаксис as, в зависимости от того, к какому свойству вы хотите обратиться в e.target.

handleAppModeClick(e: React.MouseEvent) {
    const appMode = (e.target as HTMLButtonElement).getAttribute('data-appMode');
}

Answer 3

В вашей функции события у вас есть переменная e, e представляет событие, вызванное нажатием кнопки, e имеет целевое свойство, поэтому для доступа к атрибуту из элемента, который вы должны сделать:

handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
    const target = e.target as HTMLElement;
    let attr = target.getAttribute("data-attribute-name-here");
    //do something

}