在反应中禁用反应路由器链接

Question

我是 React 的新手，遇到了禁用按钮元素隐藏的链接的问题。

我尝试了以下方法：

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>
    )
  }
}

默认情况下，只要没有商品添加到购物车，链接就应该被取消。 我调试了它，当构造函数被调用时，“linkDisabled”在 render() 中也被设置为 true。 问题是链接仍然启用。

谢谢你的帮助！

Answer 1

linkDisabled不需要处于状态。 这开启了改变状态和忘记更新linkDisabled 。 最好在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>
        )
    }
}

这样，如果您向组件添加更多内容并且必须在不同的位置setState ，您将无需担心重复linkDisabled和item的逻辑。

Answer 2

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>);
}

经过一些重构......试试这个？

Answer 3

锚标签没有“禁用”属性，链接只是路由器感知锚标签。 你可以使用两件事之一

1.使用 css 禁用指针事件

反应组件

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.如果购物车中没有商品，请在点击链接时使用 event.preventDefault()

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>);
}

但是，在这两种情况下，您都可以使用命令行访问路由，因为只有指针事件被禁用。