reactjs - 样式化组件和 React : Click event

Question

我正在尝试为 Styled Components 组件创建 onClick，但它不起作用。它不会在控制台中记录 hello。

<Component onClick={this.handleClick} />

handleClick:

handleClick(e) {
    console.log("hello");
}

这也在构造函数中:

this.handleClick = this.handleClick.bind(this);

组件:

const Component = styled.span`
    /* Regular CSS */
    ${css};
`;

提前致谢!

编辑:

该组件嵌套在 Button 组件中。当我将 onClick 添加到按钮组件时 hello 显示在控制台中。但是我希望 child 有这个功能而不是 parent 。

编辑 2:

好的，所以当我更改 CSS 时它就可以工作了。我不知道为什么。这是我的 CSS:

        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        display: block;
        z-index: 0;
        position: absolute;
        overflow: hidden;
        border-radius: inherit;

Answer 1

我们可能需要更多代码。无论如何，最简洁的绑定(bind)方式是通过箭头函数:

handleClick = () => console.log('click')

如果您的 Button 位于 INSIDE 中，则您必须使用其他 Prop ，因为 onClick 已绑定(bind)到 onClick 事件。 尝试

// In Parent
<Parent action={this.handleClick} />

// In Child
<Child onClick={this.props.action} />