Question

我有以下代码：

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

效果很好，但是linter给了我：

jsx-a11y/no-static-element-interactions

如何解决此错误（根据jsx-a11y）？

Answer 1

来自Doc：

强制非交互式DOM元素没有交互式处理程序。 <div> and <span>等静态元素不应该有鼠标/键盘事件监听器。而是使用更语义的东西，例如按钮或链接。

有效的互动元素是：

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

参考：https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md

Answer 2

从eslint suggested documentation开始，了解这一点很重要：

案例：该元素不是按钮，链接，菜单项等。它正在从其包含的元素中捕获冒泡事件

如果您的元素正在捕获后代元素中冒泡的单击或按键事件，则此元素的适当角色是演示。

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

Answer 3

通过提供... role =“ button”和tabIndex

解决此错误

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

静态元素交互

3 个答案: