Javascript 静态元素相互作用

我有以下代码：

Enabled = (id) => {
  let removal = null;
  if (!this.props.disabled) {
    removal = (
      <span
        className="chipRemove"
        onClick={() => this.onDelete(id)}
      >
        x
      </span>)
    ;
  }
  return removal;
}

如何解决此错误（根据

jsx-a11y

）？

来自文档：

强制非交互DOM元素没有交互处理程序。 静态元素，如

和

，不应具有 鼠标/键盘事件侦听器。而是使用更具语义的东西， 例如按钮或链接

有效的交互元素包括：

<a> elements with href or tabIndex props
<button> elements
<input> elements that are not hidden
<select> and <option> elements
<textarea> elements
<area> elements

---

通过提供…role=“button”和tabIndex解决此错误

<div
  onClick={onClickHandler}
  onKeyPress={onKeyPressHandler}
  role="button"
  tabIndex="0">
 Save
</div>

拯救

从eslint了解这一点很重要：

大小写：此元素不是按钮、链接、菜单项等。它从包含的元素捕获冒泡事件

如果您的元素正在从子元素捕获冒泡的单击或键事件，则此元素的适当角色是表示

<div
  onClick={onClickHandler}
  role="presentation">
  <button>Save</button>
</div>

拯救

<div
  onClick={onClickHandler}
  role="presentation">
  <button>Save</button>
</div>