javascript - 在 React 中禁用 DIV onClick 的最佳方法

Question

我有一个带有接受 onClick 和 aria-disabled 属性的 div 的组件。它们都是作为 Prop 出现的，禁用是可选的。在我的渲染方法中，我执行以下操作:

<div onClick={!this.props.Disabled ? this.props.Click : undefined} 
     aria-disabled={this.props.Disabled>My Div</div>

我使用 CSS 来可视化禁用状态(不透明度:0.5，指针事件:无等等)。但我想知道是否有更好的方法来处理实际的 onClick。因为它是一个强制性的 Prop ......所以即使该元素被禁用你仍然需要传入一个onClick来满足条件。有没有更好的方法来解决这个问题？

Answer 1

在CSS中为div[disabled]设置pointer-events: none,

测试.scss

div[disabled]
{
  pointer-events: none;
  opacity: 0.7;
}

上面的代码使div的内容被禁用，你可以通过添加disabled属性来使div被禁用。

Test.js

<div disabled={this.state.disabled}>
  /* Contents */
</div>

单击按钮后，您可以将状态变量 disabled 更改为“true”。

handleClick = () =>{
    this.setState({
      disabled: true,
    });
  }

引用: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events