Question

出于某些奇怪的原因，onClick无法在我的React App中工作。

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

如您所见，我在console.logged了它，但是在控制台中什么都看不到。很奇怪。这是SandCode框。

当我们单击GorillaSurfIn时，应该做的就是渲染GorillaSurfIn。

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

Answer 2

我认为这是因为GorillaSurfIn是自定义组件，对吗？

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

要使其工作，您必须将props放入组件内部，并将其应用于组件内部的div

Answer 3

枝形吊灯说的是写的。 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 关键字，以确保您绑定了该功能或使用了箭头功能

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

3 个答案: