类型“EventTarget”上不存在属性“数据集”

Question

单击后尝试访问按钮上的数据集时，出现此^错误。

linkProvider = (ev: React.SyntheticEvent<EventTarget>) => {
  console.debug('ev.target', ev.target.dataset['ix']) // error
}

// in render 
providers.map((provider, ix) => (
  <button key={provider} data-ix={ix} onClick={this.linkProvider}>{provider}</button>
))

任何想法如何让它发挥作用？

Answer 1

问题在这里

Element

，

document

，

window

可以是

EventTarget

。你应该检测你的

EventTarget

if 是一个元素。所以在你的情况下，下面的代码应该可以工作

linkProvider = (ev: React.SyntheticEvent<EventTarget>) => {
  // If event target not an HTMLButtonElement, exit
  if (!(ev.target instanceof HTMLButtonElement)) {
    return;
  }
  console.debug('ev.target', ev.target.dataset['ix']) 
}

捷径

linkProvider = (ev: React.SyntheticEvent<HTMLButtonElement>) => {
  console.debug('ev.target', ev.currentTarget.dataset['ix']) 
}

我还添加了示例here

Answer 2

结合@Efe 和@fatemefazli 提供的两个建议，我得出了一个有效的解决方案：

供参考，这是接口以及它不能与

target

一起工作的原因：（github链接）

interface SyntheticEvent<T> {
    /**
     * A reference to the element on which the event listener is registered.
     */
    currentTarget: EventTarget & T;

    // If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
    /**
     * A reference to the element from which the event was originally dispatched.
     * This might be a child element to the element on which the event listener is registered.
     *
     * @see currentTarget
     */
    target: EventTarget;

    // ...
}

Answer 3

如果我可以尝试添加到Efe的回复：

我认为在使用属性之前检查属性

dataset

是否具有

ix

属性也是有意义的*：

linkProvider = (ev: React.SyntheticEvent<EventTarget>) => {
  if (!(ev.target instanceof HTMLButtonElement)) {
    return;
  }

  if (ev.target.dataset.ix) {
    /// event handler logic
  }

  
}

*从前端大师课程中得到这个例子