我正在尝试为样式化组件组件创建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;
答案 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)}/>