Hasta ahora, los sistemas de carrito de compras que he visto implican agregar una pequeña cantidad de artículos al carrito y usar un botón desplegable (o un botón de incremento), los usuarios pueden seleccionar la cantidad de producto y la cantidad se resta de la cantidad en stock. Usando la matriz a continuación, puedo seleccionar la cantidad de elementos de un botón desplegable. La matriz obtiene la cantidad total de artículos en stock.
Esto parece estar bien cuando se trata de pocos artículos en stock. Cuando, por ejemplo, hay hasta 5000 artículos en stock y quiero seleccionar 100 artículos, será complicado tener un menú desplegable (o botón de incremento) desde el cual se recuperan los artículos totales en stock y el usuario selecciona la cantidad que quiere . La longitud del menú desplegable será un inconveniente.
[...Array(item.countInStock).keys()].map((x) => ( <option key={x + 1} value={x + 1}> {x + 1} </option> ))El reductor redux se muestra a continuación.
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] } }Añadir al carrito
const addToCartHandler = () => {history.push(`/cart/${match.params.id}?qty=${qty}`)} <Button onClick={addToCartHandler}>Add to Cart<Button>Por supuesto, el código se ejecuta correctamente. Pero quiero saber qué hacer cuando el usuario quiere agregar muchos artículos (digamos 100 artículos) al carrito. En lugar de tener un menú desplegable desde el que selecciona (lo que no será conveniente), ¿qué enfoque puedo usar para lograr esto? Se sugirió que use un campo de entrada. Aunque podría incrementar el valor usando un botón, pero no puedo escribir en el campo. Y lo que quiero es poder ingresar la cantidad del artículo no solo para incrementar con un botón
Creo que si puede usar el campo de entrada con el número de tipo, debería resolver su problema, y es fácil para el usuario ingresar la cantidad deseada sin problemas.
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}>