根据输入值禁用链接：ReactJS答案

【问题标题】：Disable link based on input values: ReactJS根据输入值禁用链接：ReactJS
【发布时间】：2020-11-01 14:42:33
【问题描述】：

我注意到 REACT 中的组件的禁用没有按预期工作。

<Link onClick={() => this.DoSomething()}
disabled={this.props.status != "Approved"}>
<NavDropdown.Item>Approve</NavDropdown.Item>
</Link>

我想停止特定条件下的链接遍历。 --For status =Approved 仅在这种情况下我希望它调用 this.DoSomething()

使用三元（条件）运算符条件，我无法在 LINK 组件中进行比较。

我不能将整个链接组件放在条件运算符中，因为这两种情况我都需要 NavBar。

【问题讨论】：

分享完整的组件代码（包括导入）可能会有所帮助，或者告知Link 是什么，以便我们可以看到它接受的道具。
我认为这可能会有所帮助Link

标签： reactjs

【解决方案1】：

无论disabled 是否为真，都会调用OnClick。如果你想防止遍历，你可以在 DoSomething 里面做这样的事情

  DoSomething = (e) => {
    if(this.props.status != "Approved") {
      e.preventDefault();
    }
  }

【讨论】：

【解决方案2】：

您应该定义一个在 disabled 和 onClick 函数中都使用的变量：

const disabled = this.props.status != "Approved"
<Link onClick={() => disabled ? return : this.DoSomething()}
disabled={disabled}>
<NavDropdown.Item>Approve</NavDropdown.Item>
</Link>

Disabled 只是一个布尔值，它永远不会影响您添加的 eventListener onClick。 https://www.w3schools.com/tags/att_disabled.asp#:~:text=Definition%20and%20Usage,a%20checkbox%2C%20etc.)。

【讨论】：