使用内置条件停止减少数字 React/JS

Question

我有一个可以减少数字的按钮。我如何在 React 中创建一个当我的数字为 1 时停止减少的条件？

<Button type="button" size="small" onClick={() => 
            handleUpdateCartQty(item.id, item.quantity - 1)}>-</Button>

类似的东西：

if(item.quantity == 1){
<Button type="button" size="small" onClick={() => 
            handleUpdateCartQty(item.id, item.quantity)}>-</Button>
}else{
<Button type="button" size="small" onClick={() => 
            handleUpdateCartQty(item.id, item.quantity - 1)}>-</Button>
}

备注

item.quantity保存数字

的值

Answer 1

您可以简单地使用三元运算符作为 handleUpdateCartQty 参数，例如：

<Button type="button" size="small" onClick={() => 
            handleUpdateCartQty(item.id, item.quantity <= 1 ? item.quantity : item.quantity - 1)}>-</Button>

Answer 2

我会用 Math.max 来达到这个目的

<Button type="button" size="small" onClick={() => 
            handleUpdateCartQty(item.id,  Math.max(0, item.quantity - 1)}>-</Button>

Answer 3

我必须指出，使用 onclick 并不总是一个好习惯。我建议您改用 addEventListener。

查看更多here

document.querySelector('button').addEventListener('click', function() {
  if (item.quantity > 1) {
    handleUpdateCartQty(item.id, item.quantity)
    item.quantity--;
  }
})

<button type="button" size="small" >-</Button>

Answer 4

可以通过多种方式实现这一点

让我与您分享 2 种方法，以便您可以 select 根据您的要求选择一种

如果一个按钮减少了计数，那么可能有另一种增加计数的方法

如果是这样，那么您可以在值为 1 时禁用递减计数按钮 disabled={newValue<=1}

另一种方法是在函数中添加一个 if 条件

const handleUpdateCartQty = (id, newVal) => {
     if(newVal < 1) {
       // showNotification('min allowed quantity is 1');
       return;
     } 
    // Do update operation  
 }

如果您没有禁用按钮并且没有显示任何通知 min quantity should be 1 而只是在代码中处理条件，那么它可能会给用户留下按钮不起作用的印象

使用内置条件停止减少数字 React/JS

Stop decreasing number with built in condition React/JS

javascript

rendering

reactjs

react-native