¿Cómo puedo llamar a dos constantes en el mismo evento onclick? Una es abrir un formulario emergente y la otra es hacer un efecto de explosión de emoji cada vez que hago clic en el botón.
Este es el código cuando se hace clic en el botón, muestra el formulario emergente, pero la explosión de emoji no aparece.
const CTA = () => { const [buttonPopup, setButtonPopup] = useState(false) const explosion = (posX, posY) => emojisplosion({ emojis: ["🌌", "✨", "⭐", "💫", "🚀", "🌎", "🌑"], physics: { gravity: -0.20, initialVelocities: { rotation: { max: 24, min: -20 }, rotationDecelaration: 2.01, y: { max: 17, min: 14.7, }, x: { max: 4, min: 1.3, }, }, }, position: () => ({ x: posX, y: posY }), }); const blast = event => { explosion(event.clientX, event.clientY) } return ( <div className="vimcash__cta"> <div className="vimcash__cta-content"> <p>Comienza con nosotros</p> <h3>Comunicate hoy mismo y empezemos a explorar posiblidades infintas.</h3> </div> <div className="vimcash__cta-btn"> <button type="button" onClick={() => {setButtonPopup(true); blast();}}>Contactar</button> </div> <Popup trigger={buttonPopup} setTrigger={setButtonPopup}> <h3>Popup formulario de contacto</h3> <p>trigger popup form contacto</p> </Popup> </div> ) }intenta combinarlos de la siguiente manera:
const allFunc = (e) => { explosion(e.clientX, e.clientY) setButtonPopup(true) } <button onClick={allFunc}>Contactar</button>Puede intentar usar el operador && o puede agregar corchetes y luego llamar a las funciones. Como esto:
<button onClick={(e) => { // call your functions here explosion(e.clientX, e.clientY); setButtonPopup(true); }}>Contactar</button> O esto con el operador &&
<button onClick={func1() && func2()}>Contactar</button>