Reactjs 防止在禁用的跨度上单击点火

我有一个React组件，它有一个触发动作的范围

<span
  className="btn badge"
  onClick={() => alert('Added!')}
  disabled={this.props.enabled !== true}
>
   <span className="glyphicon glyphicon-plus" />
</span>

alert（'Added！'）}
disabled={this.props.enabled！==true}
>

现在，即使

disabled

条件为true，我在span上看到禁用的光标，但单击它实际上会触发onClick事件，这是意外的。不应为禁用的元素激发任何事件。用

代替span似乎效果不错

---

感谢您的帮助

使用样式来显示禁用的道具，而不是使用禁用的道具

<span
  className={`btn badge ${!this.props.enabled && disabledClass}`}
  onClick={this.props.enabled && (() => alert('Added!'))}
 >
 <span className="glyphicon glyphicon-plus" />

alert（'Added！'）}
>

或者为了语义和可访问性更好

<button
 className="btn badge"
 onClick={() => alert('Added!')}
 disabled={this.props.enabled !== true}
>
  <span className="glyphicon glyphicon-plus" />
</button>

alert（'Added！'）}
disabled={this.props.enabled！==true}
>

---

我没有测试它，但它应该可以工作

您只能在选定的HTML元素上使用

disabled

。下面是html中表单元素的disabled is属性的可能重复列表，例如input、button、select、textarea。请不要使用单击span、div、p或。。。因为它也有残疾人的可访问性问题，它不可聚焦等等。您使用的是哪个

ReactJS

版本？是的，我肯定可以这样做，但为什么禁用的span会触发onClick事件？就像Utsav Patel在评论中说的，您只能在表单HTML元素上使用它，而span不是表单元素。