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

Question

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

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

如您所见，我 console.logged 它，但我在控制台中没有看到任何内容。很奇怪。这是 SandCode 框。

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

Answer 1

我想是因为 GorillaSurfIn 是自定义组件吧？

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

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

Answer 2

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

Answer 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>

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

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

How come that onClick doesnt work in React in some situations?

components

onclick

reactjs