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

【问题标题】：How come that onClick doesnt work in React in some situations?为什么 onClick 在某些情况下在 React 中不起作用？
【发布时间】：2021-01-18 05:38:34
【问题描述】：

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

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

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

当我们点击 GorillaSurfIn 时，它应该做的是渲染 GorillaSurfOut。

【问题讨论】：

标签： reactjs onclick components

【解决方案1】：

您的 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>
    );
};

【讨论】：

尼古拉斯写的应该行得通。如果它不能立即工作，请不要尝试重新运行 npm start 和/或清除 catche

【解决方案2】：

我认为这是因为 GorillaSurfIn 是一个自定义组件，对吧？

onClick 事件仅适用于 DOM 元素，例如 div。

要使其工作，您必须获取组件内的道具，并将其应用于组件内的 div

【讨论】：

【解决方案3】：

Chandelier Axel 说的是写。 onClick 事件侦听器适用于 React 元素，而不适用于 React 组件。要为 React 组件添加事件侦听器，您必须执行以下操作。

function Test({ customClickEventHandler }) {
    return <div onClick={customClickEventHandler}><h1>Test Button</h1></div>;
}

class Main extends React.Component {
  render() {
    return (
      <Test customClickEventHandler={() => console.log('Clicked')} />
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

因此，您可以将单击时必须调用的函数作为道具传递给子组件，然后将 onClick 侦听器添加到包含子组件中所有其他元素的顶部元素。它按您的预期工作。在这种情况下，您必须注意 this 关键字确保您绑定函数或使用箭头函数

【讨论】：