在Reactjs中选中/取消选中属性onChange复选框

Question

我的反应组件中存在问题。我有这样的自定义样式复选框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; 
} 

非常感谢这方面的帮助。

Answer 1

好吧，我找到了解决方案。

我在组件中添加了onClick={ this._onChange }到我的标签，它的工作原理！

Answer 2

您的复选框缺少一些需要的道具以使其工作。你需要能够告诉复选框，如果它被选中或不使用道具或状态。你还需要给每个复选框一个值，所以当你检查它时，你实际上会有一个值来处理。最后你需要一个onChange道具，当点击复选框时会发生。这个函数应该更新任何状态控制着特定复选框是否被选中。下面是已经取得了反应

<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 
}