Reactjsのチェックボックスのオン/オフチェックボックスをチェック

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を反応させるために作られたチェックボックスの入力の例は、[OK]を

_onChange: function(event) { 
    // do stuff using the event to grab needed values 
}