const ProductScreen = () => { const [qty, setQty] = useState(0); const handleAddtoCart = () => { console.log(qty); }; return ( <div className="productScreen"> {product.countInStock > 0 && ( <div className="productScreen__details__qty"> <span>Qty : </span> <select id="qty" name="qty" value={qty} onChange={(e) => setQty(e.target.value)} > {[...Array(product.countInStock).keys()].map((x) => ( <option key={x + 1} value={x + 1}> {x + 1} </option> ))} </select> </div> )} {product.countInStock > 0 ? ( <div className="productScreen__details__price__details__cart"> <button className="productScreen__details__price__details__toCart" onClick={handleAddtoCart()} > Add to Cart </button> </div> </div> </div> ); };Aquí, handleAddtoCart se activa al seleccionar opciones, pero no se activa cuando se presiona el botón (handleAddtoCart se agrega al botón), cuando cambio handleAddtoCart() a handleAddtoCart en el atributo onClick del botón, funciona correctamente.
¿Por qué cuando handleAddtoCart() se proporciona como atributo onclick, se activa mediante la opción de selección adyacente y no se activa cuando se presiona el botón?
Debe realizar una devolución de llamada a esa función, ya que cada representación del componente ejecutará literalmente handleAddtoCart() y no como espera que suceda solo con el disparador onClick. como explican los documentos oficiales de react:
Para ahorrar tipeo y evitar el comportamiento confuso de esto, usaremos la sintaxis de la función de flecha para los controladores de eventos aquí y más abajo:
class Square extends React.Component { render() { return ( <button className="square" onClick={() => console.log('click')}> {this.props.value} </button> ); } } Observe cómo con onClick={() => console.log('click')} , estamos pasando una función como accesorio onClick. React solo llamará a esta función después de un clic. Olvidar () => y escribir onClick={console.log('click')} es un error común y se dispararía cada vez que el componente se vuelve a renderizar.
para más detalles: https://reactjs.org/tutorial/tutorial.html
Cambio
onClick={handleAddtoCart()}por
onClick={handleAddtoCart}Prueba también con:
onChange={(e) => setQty(e.currentTarget.value)}en vez de :
onChange={(e) => setQty(e.target.value)}La propiedad de solo lectura currentTarget de la interfaz Event identifica el destino actual del evento, ya que el evento atraviesa el DOM. Siempre hace referencia al elemento al que se ha adjuntado el controlador de eventos, a diferencia de Event.target, que identifica el elemento en el que se produjo el evento y que puede ser su descendiente.
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget