静态元素交互 [英] Static elements interactions

问题描述

我有以下代码：

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

它运作良好，但是linter给了我：

it works well, but linter is giving me:

jsx-a11y/no-static-element-interactions

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

How can I solve this error (according to jsx-a11y)?

推荐答案

来自Doc：

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

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

这篇关于静态元素交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！