Question

我有一个React组件，该组件的跨度可触发动作。

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

现在，即使disabled条件为true，我也可以在范围上看到禁用的光标，但是单击它实际上会触发onClick事件，这是意外的。禁用元素不会触发任何事件。使用<button>代替跨度似乎很好。

感谢您的帮助！

Answer 1

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

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

，甚至在语义和可访问性方面更好。

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

我没有测试它，但是应该可以。

防止onClick在禁用范围内触发

1 个答案: