Reactjs jsx-a11y/无静态元素交互：如何使跨度可点击

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

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

{this.state.value}

---

不用说，它会在eslint中产生一个错误，消息是“可见的、非交互的元素不应该有鼠标或键盘事件监听器jsx-a11y/没有静态元素交互”。但我不知道解决这种情况的最佳方法是什么，我们是否应该将其改为按钮，并将样式改为跨度。我真的没有太多处理这个问题的经验。

错误是什么？onClick转换为DOM中的一个有效事件（单击范围），因此您应该能够执行此操作。

查看文档，它漂亮地告诉您该做什么。

对于您的情况，解决方案是添加

role=“button”

{this.state.value}

我用以下方法修复了它：

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

{this.state.value}

对不起，我的问题不够清楚。我的意思是eslint中的错误，它说“可见的、非交互的元素不应该有鼠标或键盘事件监听器：jsx-a11y/没有静态元素交互”啊，这基本上是基于语义推理的观点——即页面中的HTML应该对阅读它的人来说是直观的，而不需要呈现。按钮或锚定链接显然意味着交互，而像跨度这样的分割元素则不是。就我个人而言，我发现表单中的按钮更快乐。所以我会使用一个锚链。它还具有像开箱即用的跨距一样的内联元素的优点。但是，简短的回答是肯定的：您必须将元素标记更改为与用户交互直观关联的内容，以消除该警告。添加role=“button”后，新的错误是：具有“button”交互角色的元素必须是可聚焦的。（我的代码与您的解决方案相同）

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