样式化组件和 React：点击事件

Question

我正在尝试为样式化组件创建 onClick，但它不起作用。它没有在控制台中记录

hello

。

<Component onClick={this.handleClick} />

手柄点击：

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

这也在构造函数中：

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

组件：

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

提前致谢！

编辑：

该组件嵌套在 Button 组件中。当我将 onClick 添加到按钮组件时，控制台中会显示

hello

。但是我希望孩子有这个功能而不是父母。

编辑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

我们可能需要更多代码。无论如何，最干净的绑定方法是通过箭头函数：

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

如果您的按钮位于内部，您必须使用另一个道具，因为 onClick 绑定到 onClick 事件。 尝试一下

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

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

Answer 2

您的跨度以 css 值

display: inline

呈现。如果其中没有要展开的实际内容，则宽度将为 0 像素，因此您实际上并没有点击它。

我遇到了同样的问题，在样式组件中我无法让它与强制的

display: block

一起工作。您应该使用可点击的项目，例如

styled.button...

Answer 3

您可能想尝试一下：

handleClick = e => {
  console.log('hello');
}

...

<Component onClick={(e) => this.handleClick(e)} />

或

<Component onClick={this.handleClick.bind(e)}/>