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

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

1。使用css

的Diasble指针事件

REACT组件

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

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

Answer 3

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

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

在反应

3 个答案: