管理大量物品的添加到购物车答案

【问题标题】：Managing add-to-cart for large quantity of items管理大量物品的添加到购物车
【发布时间】：2022-01-10 03:28:43
【问题描述】：

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

在处理库存中的少量物品时，这似乎很好。例如，当库存多达 5000 件商品并且我想选择 100 件商品时，如果有一个下拉（或增量按钮）可以从中检索库存中的总商品并且用户选择他想要的数量，这将变得混乱.下拉菜单的长度会很不方便。

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

redux reducer 如下图

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 件商品）添加到购物车时该怎么做。我可以使用哪种方法来实现这一点，而不是让他从中选择（这不方便）的下拉列表？有人建议我使用输入字段。虽然我可以使用按钮增加值，但我无法在字段中输入。我想要的是能够输入项目的数量，而不仅仅是通过按钮增加

【问题讨论】：

标签： javascript reactjs react-redux

【解决方案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}>

【讨论】：

谢谢。我尝试使用输入字段，但无法输入