我想在同一个onclick中调用两个const

Question

如何在同一个onclick事件中调用两个const ?一种是打开一个弹出式表单，另一种是每次点击按钮都有一个表情符号爆炸的效果。

这是当按钮被点击时的代码，它显示弹出表单，但没有出现表情符号爆炸。

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>
)
}

Answer 1

尝试按如下方式组合它们:

const allFunc = (e) => {
explosion(e.clientX, e.clientY)
setButtonPopup(true)
}

<button onClick={allFunc}>Contactar</button>

Answer 2

您可以尝试使用&&操作符，或者您可以添加花括号，然后调用函数。这样的:

<button onClick={(e) => {
// call your functions here
explosion(e.clientX, e.clientY);
setButtonPopup(true);
}}>Contactar</button>

或者用&&运算符

<button onClick={func1() && func2()}>Contactar</button>