I'm new to React and got a issue to disable a link covert by a button element.

I tried the following:

class ShoppingCartLink extends React.Component {

constructor(){
    super();
    ShoppingCartStore.register(this.refresh.bind(this));

    this.state = {count:0};
    this.item = "items";
    this.linkDisabled = new Boolean(true);
}

refresh(){
    if (ShoppingCartStore.items.length === 0 || ShoppingCartStore.items.length > 1 )
    {
        this.item = "items";
    }
    else
    {
        this.item = "item";
    }

    if (ShoppingCartStore.items.length !== 0)
    {
        this.linkDisabled = false;
    }

    this.setState({count: ShoppingCartStore.items.length});
}

render() {
    return (
        <div>
            <button type="button" disabled = {this.linkDisabled}>
                <Link to="shoppingCart">Shopping Cart: {this.state.count} {this.item}</Link>
            </button>
        </div>
    )
  }
}

By default the Link should be disbaled as long no item is added to the cart. I debugged through it and when the constructor is called "linkDisabled" is set to true as well in render(). The problem is that the link is still enabled.

Thanks for your help!

I'm new to React and got a issue to disable a link covert by a button element.

I tried the following:

class ShoppingCartLink extends React.Component {

constructor(){
    super();
    ShoppingCartStore.register(this.refresh.bind(this));

    this.state = {count:0};
    this.item = "items";
    this.linkDisabled = new Boolean(true);
}

refresh(){
    if (ShoppingCartStore.items.length === 0 || ShoppingCartStore.items.length > 1 )
    {
        this.item = "items";
    }
    else
    {
        this.item = "item";
    }

    if (ShoppingCartStore.items.length !== 0)
    {
        this.linkDisabled = false;
    }

    this.setState({count: ShoppingCartStore.items.length});
}

render() {
    return (
        <div>
            <button type="button" disabled = {this.linkDisabled}>
                <Link to="shoppingCart">Shopping Cart: {this.state.count} {this.item}</Link>
            </button>
        </div>
    )
  }
}

By default the Link should be disbaled as long no item is added to the cart. I debugged through it and when the constructor is called "linkDisabled" is set to true as well in render(). The problem is that the link is still enabled.

Thanks for your help!

• javascript
• html
• reactjs

3 Answers 3

There is no "disabled" attribute for anchor tags, and Links are just router aware anchor tags. You can use one of the two things

1. Diasble pointer events with css

REACT Component

constructor(){
   super();
   ShoppingCartStore.register(this.refresh.bind(this));

   this.state = {
     count:0,
     linkDisabled: 'disable-link';
   };
}

refresh(){

   const length = ShoppingCartStore.items.length;
   const classValue =  (length === 0)? 'disable-link': '';
   this.setState({
      count: length,
      linkDisabled: classValue
   });
}

render() {
   const length = ShoppingCartStore.items.length;
   return (<div>
        <button type="button" disabled={this.state.linkDisabled}>
            <Link to="shoppingCart" className={this.state.linkDisabled}>Shopping Cart: {this.state.count} {((length > 0)?"items":"item")}</Link>
        </button>
    </div>);
}

CSS

. disable-link {
  pointer-events: none;
}

2. Make use of event.preventDefault() on click of link if there are no items in the cart

constructor(){
   super();
   ShoppingCartStore.register(this.refresh.bind(this));

   this.state = {
     count:0,
     linkDisabled: true
   };
}

refresh(){

   const length = ShoppingCartStore.items.length;

   this.setState({
      count: length,
      linkDisabled: (length !== 0)
   });
}
handleClick = (e) => {
  if(this.state.linkDisabled == true) {
    e.preventDefault();
  }
}
render() {
   const length = ShoppingCartStore.items.length;
   return (<div>
        <button type="button" disabled={this.state.linkDisabled}>
            <Link to="shoppingCart" onClick={this.handleClick}>Shopping Cart: {this.state.count} {((length > 0)?"items":"item")}</Link>
        </button>
    </div>);
}

However in both these cases you can access the route with mandline as only pointer events are disabled.

linkDisabled does not need to be in state. This opens up possibilities of changing state and forgetting to update linkDisabled. It is better to pute it in render.

class ShoppingCartLink extends React.Component {

    constructor(){
        super();
        ShoppingCartStore.register(this.refresh.bind(this));

        this.state = {count: 0};
    }

    refresh() {
        this.setState({count: ShoppingCartStore.items.length});
    }

    render() {
        const linkDisabled = this.state.count === 0;
        const item = this.state.count === 1 ? "item" : "items";
        return (
            <div>
                <button type="button" disabled={linkDisabled}>
                    <Link to="shoppingCart">Shopping Cart: {this.state.count} {item}</Link>
                </button>
            </div>
        )
    }
}

This way, if you ever add more to the ponent and have to setState in a different place, you will not need to worry about duplicating the logic for linkDisabled and item.

constructor(){
   super();
   ShoppingCartStore.register(this.refresh.bind(this));

   this.state = {
     count:0,
     linkDisabled: true
   };
}

handleClick(event) {
   if(this.state.linkDisabled) event.preventDefault();
}

refresh(){

   const length = ShoppingCartStore.items.length;

   this.setState({
      count: length,
      linkDisabled: (length === 0)
   });
}

render() {
   const length = ShoppingCartStore.items.length;
   return (<div>
            <Link to="shoppingCart"
                  onClick={this.handleClick.bind(this)}>Shopping Cart: {this.state.count} {((length > 0)?"items":"item")}</Link>
    </div>);
}

After some refactoring ... Try this ?