Question

在我的项目中，我们有以下几行代码：

    <span
      onClick={this.toggleEditing}
    >
      {this.state.value}
    </span>

毋庸置疑，它会在消息中产生错误消息“可见，非交互式元素不应该有鼠标或键盘事件监听器jsx-a11y / no-static-element-interactions”。但我不知道解决这种情况的最佳方法是什么，我们应该将其更改为按钮并将样式更改为跨度。我真的对这个问题没什么经验。

Answer 1

查看文档，它精美地告诉您该怎么做 https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#how-do-i-resolve-this-error

对于您的情况，解决方案是添加role="button"

<span onClick={this.toggleEditing} role="button">
  {this.state.value}
</span>

Answer 2

我用这个修复了它：

<span
    role="button"
    tabIndex={0}
    title="Some title"
    onClick={this.toggleEditing}
    onKeyPress={this.toggleEditing}
>
  {this.state.value}
</span>

Answer 3

错误是什么？ onClick转换为DOM中有效的事件（点击一个范围），这样你就能够做到这一点。

jsx-a11y / no-static-element-interactions：如何使span可点击

3 个答案: