"dataset"属性在类型“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>
))

你有什么想法让它工作起来吗？

- Qwerty

Answer 1

问题在这里：Element、document和window都可以是EventTarget。如果它是一个元素，你应该检测你的EventTarget。所以在你的下面代码中应该能够工作。

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']) 
}

我还添加了一个示例这里

- Efe

---

这里稍微详细一些。为什么这个 React.SyntheticEvent<HTMLButtonElement> 不起作用？ - Qwerty

你可以通过 e.currentTarget.dataset.pageNumber 访问它，这里是一个示例。 - Abdessamad El Hamdany

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;

    // ...
}

- Qwerty

---

我更新了我的答案，加入了这个更短的解决方案，以展示两个答案。 - Efe

问题在于 target 并不总是等于 currentTarget。 - sad comrade

这并不能解决事件委托模式下的问题，因为数据集在子元素上，但事件处理程序附加到父元素上。我猜React类型应该被修复。简单的例子：<ul onClick={({ target: { dataset: { value } } }: MouseEvent<HTMLUListElement> & { target: { dataset: { value?: string } }; }) => { console.debug(value); }} ><li data-value="foo">item 1</li><li data-value="bar">item 2</li></ul> - igor

Answer 3

如果我可以尝试补充Efe的回答：

我认为在使用属性之前，检查dataset属性是否具有ix属性也是有意义的*：

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

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

  
}

*这个例子来自于一门前端大师课程

- MadJoRR