我的react组件有一个问题。我有像这样的自定义样式的复选框http://jsfiddle.net/fvdbcch0/
我想点击我的组件或标签来检查或取消检查输入。
目前它只工作在基本的样式只有当我点击输入。
如何正确更改onChange检查状态
代码: var Tag = React.createClass({
getInitialState: function(){
return {
checked: false
};
},
componentDidMount: function() {
this.setState({
checked: false
});
},
_onChange: function(event) {
if(this.state.checked == false){
this.setState({
checked: true
});
} else {
this.setState({
checked: false
});
}
},
render: function() {
return (
<div>
<input type="checkbox" id="{this.props.id}" name="{this.props.name}" checked={this.state.checked} onChange={ this._onChange }
value={ this.props.id }/><label htmlFor="{this.props.name}">{this.props.name}</label>
</div>
);
}
});
var ReviewTag = React.createClass({
render: function() {
var tags = [{"id": 1, "name": "friendly"}, {"id": 2, "name": "comfortable"}, {"id": 3, "name": "fast"}];
const tagComps = tags.map(function(tag){
return <Tag {...tag} />;
});
return (
<div>
{tagComps}
</div>
);
}
});
React.render(<ReviewTag/>, document.body);
和样式的自定义输入:
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked,
[type="radio"]:not(:checked),
[type="radio"]:checked{
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label,
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label{
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox/radio aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before{
content: '';
position: absolute;
left:0; top: 50%;
width: 1rem; height:1rem;
border: 1px solid #aaa;
background: #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
transform: translateY(-50%);
}
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before{
border-radius:100%;
}
/* checked mark aspect */
[type="checkbox"]:checked + label:after {
content: '✓';
position: absolute;
top: 50%;
left: 0px;
font-size: 1rem;
line-height: 0.8;
color: #e71558;
transition: all .2s;
transform: translateY(-50%);
}
/* checked radio aspect */
[type="radio"]:checked + label:after {
content: '•';
position: absolute;
top: 6px;
left: 2px;
font-size: 15px;
line-height: 0.8;
color: #e71558;
transition: all .2s;
//transform: translateY(-50%);
text-align: center;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after,
[type="radio"]:not(:checked) + label:after{
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after,
[type="radio"]:checked + label:after {
opacity: 1;
//transform: scale(1);
}
/* disabled checkbox/radio */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before,
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before{
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after,
[type="radio"]:disabled:checked + label:after{
color: #999;
}
[type="checkbox"]:disabled + label,
[type="radio"]:disabled + label{
color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before,
[type="radio"]:checked:focus + label:before,
[type="radio"]:not(:checked):focus + label:before{
border: 1px dotted blue;
}
/* hover style just for information */
label:hover:before {
border: 1px solid #4778d9!important;
}
非常感谢你的帮助
您的复选框缺少一些为使其工作所需的道具。你需要能够使用props或state告诉复选框是否被选中。你还需要给每个复选框一个值,这样当你选中它时,你就会有一个值来工作。最后,你需要一个onChange道具,它将在复选框被点击时发生。这个函数应该更新控制特定复选框是否被选中的状态。下面是一个为react
创建的复选框输入示例<input name={ this.props.name }
type="checkbox"
checked={ this.props.checked }
className="cui-checkbox-input"
onChange={ this._onChange }
value={ this.props.value } />
_onChange是一个类似于
的函数_onChange: function(event) {
// do stuff using the event to grab needed values
}
好了,我找到解决办法了。
我在组件中添加了onClick={ this._onChange }
到我的标签,并且它有效!