静态元素交互

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

来自医生：

Enforce non-interactive DOM elements have no interactive handlers. Static elements such as <div> and <span> should not have mouse/keyboard event listeners. Instead use something more semantic, such as a button or a link.

有效的交互元素是：

<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

通过提供 ...role="button" 和 tabIndex

解决此错误

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

Answer 3

来自 eslint suggested documentation，了解这一点很重要：

案例：该元素不是按钮、link、菜单项等。它从它包含的元素中捕获冒泡事件

如果您的元素正在捕获来自后代元素的冒泡点击或键事件，那么该元素的正确角色是呈现。

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

静态元素交互

Static elements interactions

javascript

ecmascript-6

reactjs

eslint