在Reactjs中使选中/未选中属性onChange复选框
Make checked/unchecked attribute onChange checkbox in Reactjs
我的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 }
到我的标签,并且它有效!
相关文章:
- 使用 onChange 属性以内联方式更改复选框的值
- 将服务中的函数绑定到$scope(错误:无法设置undefined的属性'onChange')
- 如何在onchange属性中编写php代码
- 这个关键字在Safaari vs.Chrome,Firefox,IE中具有select box onchange属性
- 如何获取具有Onchange属性的表单中的所有值
- 将具有 OnChange 属性的文本字段添加到滑块
- 我可以对 HTML 表格的单元格使用 onchange 属性吗?
- JavaScript 函数 不使用输入标签的 onchange 属性
- Jquery 日期选择器删除 onclick 和 onchange 并添加默认属性
- 如何使用jquery onchange事件在HTML中添加和删除属性
- 如何使用onchange事件添加属性和删除属性
- 从onchange属性调用javascript类函数
- 如何在Drupal7中正确地将onchange属性添加到表单字段中
- 如何改进onChange属性,使其在浏览器刷新后生效
- 在onchange事件中使用html中的自定义数据属性
- HTML的onchange属性对select元素不起作用
- 在Reactjs中使选中/未选中属性onChange复选框
- 防止javascript编码分配给Html的onchange事件.TextBoxFor通过html属性
- 添加& # 39;onchange # 39;属性到DetailsView边界域
- Onchange显示选择的数据属性不起作用