Question

我正在尝试为样式化组件组件创建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时，将显示在控制台中。但是，我希望孩子拥有该功能而不是父母。

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

如果您的Button位于INSIDE内，则必须使用其他道具，因为onClick绑定到onClick事件。试试

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

Answer 2

您的跨度以display: inline的css值呈现。如果其中没有实际要扩展的内容，则宽度为0像素，因此您实际上并未单击它。

我遇到了同样的问题，在样式化组件中，我无法使其与强制display: block一起使用。您应该使用可点击的项目，例如styled.button...

Answer 3

您可能想尝试一下：

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

...

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

或

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

样式化的组件和React：Click事件

3 个答案: