根据输入值禁用链接：ReactJS

Question

I noticed that disable is not working as expected for component in REACT.

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

I want to stop the traversal of link for particular condition. --For status =Approved only in this case i want it to call this.DoSomething()

With ternary(conditional) operator condition, i am unable to compare in the LINK component.

I cant not put entire link component in conditional operator as i need NavBar for both the scenarios.

Answer 1

OnClick will be called whether disabled is true or not. If you want to prevent traversal you can do something like this inside DoSomething

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

Answer 2

You should define a variable to use in both in the disabled and the onClick function:

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

Disabled is only a boolean, it will never effect your added eventListener onClick. https://www.w3schools.com/tags/att_disabled.asp#:~:text=Definition%20and%20Usage,a%20checkbox%2C%20etc. ).