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

时间:2018-09-04 09:48:10

标签: reactjs 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时,将显示在控制台中。但是,我希望孩子拥有该功能而不是父母。

编辑2:

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

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

3 个答案:

答案 0 :(得分:0)

我们可能需要更多代码。无论如何,最干净的绑定方法是使用箭头功能:

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

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

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

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:-2)

您可能想尝试一下:

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

...

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

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