根據輸入值禁用鏈接：ReactJS

Question

我注意到禁用對於 REACT 中的組件沒有按預期工作。

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

我想停止特定條件下的鏈接遍歷。 --For status =Approved 僅在這種情況下我希望它調用 this.DoSomething()

使用三元（條件）運算符條件，我無法在 LINK 組件中進行比較。

我不能將整個鏈接組件放在條件運算符中，因為這兩種情況都需要 NavBar。

Answer 1

無論disabled是否為真，都會調用OnClick 。 如果你想防止遍歷，你可以在DoSomething中做這樣的事情

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

Answer 2

您應該定義一個在禁用和 onClick function 中使用的變量：

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

Disabled 只是一個 boolean，它永遠不會影響您添加的 eventListener onClick。 https://www.w3schools.com/tags/att_disabled.asp#:~:text=Definition%20and%20Usage,a%20checkbox%2C%20etc。 ）。