La lógica que trato de aplicar aquí puede ser totalmente incorrecta. Esta es la primera vez que intento hacer algo como esto (intento usar un campo de entrada para obtener el valor de la cantidad de artículos que se agregarán al carrito). No puedo escribir en el campo de entrada.
const [qty, setQty] = useState(1) const submitHandler = (e) => { e.preventDefault() if(e.target.value <=product.countInStock && e.target.value > 0){ setQty(e.target.value) history.push(`/cart/${match.params.id}?qty=${qty}`) }else{ alert("Insifficient Quantity in Stock") } } ======================================== <Row> <Col sm={4}>Qty</Col> <Col sm={8}> <Form onSubmit={submitHandler}> <Form.Control type="number" min="0" max={product.countInStock} value={qty} onchange={checkInput} /> <Button onClick={addToCartHandler} size="lg" disabled={product.countInStock === 0} type='button'> Add to Cart </Button> </Form> </Col> </Row>¿Cómo lo soluciono? Parece ser un problema popular que las personas han hecho preguntas en línea pero aún no pueden encontrar una solución para el mío.
La respuesta de Daniel es correcta porque un campo de entrada controlado no cambiará su valor a menos que cambie la variable de estado que lo controla. Entonces, realmente lo que necesita es poner setQty(e.target.value) dentro de su función checkInput . Eso debería hacer el truco.
También puede usar useRef para controlar su formulario. De esa manera, no habrá necesidad de volver a representar sus elementos cada vez que haya un cambio en el campo de entrada. Avíseme si está interesado en ver cómo se vería eso en su caso.
Parece que tiene un problema con sus controladores de eventos. Dado que pasa value={qty} al campo de entrada, crea un componente controlado . Sin embargo, al actualizar la entrada, no actualiza el estado de los padres, por lo que al final el valor de la entrada no cambia.
Prueba algo como esto en tu entrada:
<Form.Control type="number" min={0} max={product.countInStock} value={qty} onchange={(e) => setQty(e)}/>(Supongo que onChange devuelve el nuevo valor como número. Si no es así, deberá transformar los datos devueltos en consecuencia antes de verificarlos en el controlador de eventos de envío).
También actualice el submitHandler para que sea:
const submitHandler = (e) => { e.preventDefault() if (qty <= product.countInStock && qty > 0) { history.push(`/cart/${match.params.id}?qty=${qty}`) } else { alert('Insufficient Quantity in Stock') } }