时间戳

首页 > 解决方案 > 为什么 onClick 在某些情况下在 React 中不起作用？

reactjs - 为什么 onClick 在某些情况下在 React 中不起作用？

问题描述

由于某些奇怪的原因，onClick 在我的 React 应用程序中不起作用。

<GorillaSurfIn
                onClick={() => {
                    console.log('gorilla clicked');
                    setShouldGorillaSurfOut(true);
                }}
            />

如您所见，我对其进行了控制台记录，但在控制台中看不到任何内容。很奇怪。这是SandCode框。

它应该做的是在我们单击 GorillaSurfIn 后渲染 GorillaSurfOut。

标签： reactjsonclickcomponents

解决方案

您的 GorillaSurfIn 组件从不使用其传递的道具。您需要让它对 onClick 道具做一些事情，可能会将其传递到 div 中。

const GorillaSurfIn = (props) => {
    return (
        <div id="moving-gorilla" onClick={props.onClick}>
            <motion.img
                animate={{
                    x: 530,
                    y: 350,
                    transition: { duration: 3 }
                }}
                id="gorilla-surf-gif"
                src={require('../images/surfing_gorilla.gif')}
            />
        </div>
    );
};

推荐阅读