我有一个简单的React组件:
class FilterCheckBox extends React.Component {
clickCheckBox(e) {
console.log('clicked on checkbox');
}
render(){
return (
<div>
<a className="filter-checkbox" onClick={this.clickCheckBox.bind(this)}>
<span>{this.props.area.key}</span>
<span>{this.props.area.doc_count}</span>
</a>
</div>
)
}
}
使用上面指定的className,永远不会调用onClick处理程序。但是,如果我删除className声明,onClick工作正常。
该类添加的样式是:
.filter-checkbox,
.filter-checkbox:link,
.filter-checkbox:visited,
.filter-checkbox:focus {
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease;
color: #546e7a;
text-transform: uppercase;
text-decoration: none;
font: normal normal 700 0.875em/1.2em "Oxygen", sans-serif;
/*14px*/
outline: none;
position: relative;
display: block;
margin-bottom: 10px;
}
/* line 330, ../scss/partials/_reusables.scss */
.filter-checkbox:before,
.filter-checkbox:link:before,
.filter-checkbox:visited:before,
.filter-checkbox:focus:before {
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
content: '';
background: #ffffff;
border: 1px solid #cfd8dc;
color: #007cba;
clear: none;
cursor: pointer;
display: inline-block;
height: 15px;
line-height: 0;
width: 15px;
outline: none;
vertical-align: middle;
margin: -3px 10px 0 0;
}
/* line 347, ../scss/partials/_reusables.scss */
.filter-checkbox:after,
.filter-checkbox:link:after,
.filter-checkbox:visited:after,
.filter-checkbox:focus:after {
display: none;
content: '\f00c';
color: #ffffff;
font: normal normal 400 11px/11px FontAwesome;
position: absolute;
top: 2px;
left: 2px;
}
/* line 356, ../scss/partials/_reusables.scss */
.filter-checkbox:hover,
.filter-checkbox:link:hover,
.filter-checkbox:visited:hover,
.filter-checkbox:focus:hover {
color: #50d583;
text-decoration: none;
}
/* line 361, ../scss/partials/_reusables.scss */
.filter-checkbox.active:before,
.filter-checkbox:link.active:before,
.filter-checkbox:visited.active:before,
.filter-checkbox:focus.active:before {
border: 1px solid #50d583;
background: #50d583;
}
/* line 365, ../scss/partials/_reusables.scss */
.filter-checkbox.active:after,
.filter-checkbox:link.active:after,
.filter-checkbox:visited.active:after,
.filter-checkbox:focus.active:after {
display: block;
}
我在这里看不到会阻止事件传播的任何内容,所以必须有一些我不理解的东西......?
答案 0 :(得分:0)
事实证明,这是由另一个使用jquery捕获click事件以定位特定类名的脚本引起的。
通过消除过程找到 - 首先消除所有脚本并恢复,直到问题再次出现。然后检查问题脚本,直到找到有问题的行。
感谢您的回复。