管理添加到购物车的大量项目

Question

到目前为止，我看到的购物车系统包括向购物车添加少量商品，并使用下拉按钮(或增量按钮(，用户可以选择产品数量，并从库存数量中减去数量。使用下面的数组，我可以从下拉按钮中选择项目数量。数组获取库存中项目的总数量。

当处理库存中很少的项目时，这似乎很好。例如，当库存中有多达5000件商品，而我想选择100件商品时，从下拉列表(或增量按钮(中检索库存中的总商品并由用户选择他想要的数量会变得很混乱。下拉列表的长度会很不方便。

[...Array(item.countInStock).keys()].map((x) => (
<option key={x + 1} value={x + 1}>
{x + 1}
</option>
))

减压器如下方所示

export const cartReducer = (state = { cartItems: [], shippingAddress: {} }, action) => {
switch (action.type) {
case CART_ADD_ITEM:
const item = action.payload
const existItem = state.cartItems.find(x => x.product === item.product)
if (existItem) {
return {
...state,
cartItems: state.cartItems.map(x =>
x.product === existItem.product ? item : x)
}
} else {
return {
...state,
cartItems: [...state.cartItems, item]
}
}

添加到购物车处理程序

const addToCartHandler = () => {history.push(`/cart/${match.params.id}?qty=${qty}`)}
<Button onClick={addToCartHandler}>Add to Cart<Button>

当然，代码运行得很好。但我想知道当用户想向购物车添加许多项目(比如100个项目(时该怎么办。与其让他从下拉列表中选择(这不方便(，我可以使用哪种方法来实现这一点？有人建议我使用输入字段。虽然我可以使用按钮来增加值，但我无法在字段中键入n。我想要的是能够输入物品的数量，而不仅仅是用按钮增加

Answer 1

我认为，如果您可以使用带有类型号的输入字段，它应该可以解决您的问题，并且用户可以轻松地输入所需数量。

const onChange = (e => {
if(e.target.value <= item.countInStock && e.target.value > 0){
// do something
}
}
<input type="number" max={item.countInStock} min="0" onChange={checkValue}>