Target vs currentTarget
Прошлой весной, я наконец-то зарегистрировался на GetMentor, и теперь время от времени мне поступают различные вопросы. Некоторые из них решил публиковать здесь на канале.
Вопрос: если для параметра указать тип React.DragEvent<HTMLDivElement> ,то в коде e.target.style.background = 'white’ TypeScript ругается, что в поле target отсутствует свойство style, почему так?
Ответ:
Тут всё дело в том target — элемент, на котором произошло событие (оно могло всплыть к текущему элементу от дочернего). Из-за этого заранее тип target’а не известен, поэтому его нужно привести к нужному типу. Например, вот так:
(e.target as HTMLElement).style.background = 'white';
Вместо target можно использовать поле currentTarget, тип этого поля всегда известен, потому что currentTarget всегда ссылается на текущий элемент, к которому прикреплён обработчик событий. В этом случае можно избежать приведения типа.
e.currentTarget.style.background = 'white';
Хорошее демо о `target` и `currentTarget` есть в доке.
Ещё по теме
- Объект события Event
- Событийная модель