Kontrollkästchen aktiviert/deaktiviert Kontrollkästchen OnChange in Reactjs

Question

Ich habe ein Problem in meiner Komponente reagieren. Ich habe benutzerdefinierte Stil Kontrollkästchen wie diese http://jsfiddle.net/fvdbcch0/

Ich möchte auf meine Komponente oder Label klicken, um die Eingabe zu überprüfen oder zu deaktivieren.

Zur Zeit funktioniert es nur auf Grundstilen nur wenn ich genau auf Eingabe klicke.

Wie kann ich den aktivierten Status onChange korrekt ändern?

Code:

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); 

And Styles für meine benutzerdefinierte Eingaben:

/* 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; 
} 

Vielen Dank für Hilfe bei diesem.

Answer 1

Ok, fand ich Lösung aussehen würde.

Ich habe onClick={ this._onChange } zu meinem Etikett in Komponente hinzugefügt, und es funktioniert!

Answer 2

Ihr Kontrollkästchen fehlt ein paar Requisiten, die benötigt werden, damit es funktioniert. Sie müssen in der Lage sein, ein Kontrollkästchen zu aktivieren, wenn es überprüft oder nicht verwendet Requisiten oder Zustand. Sie müssen auch jedem Kontrollkästchen einen Wert geben, damit Sie bei der Überprüfung einen Wert haben, mit dem Sie arbeiten können. und schließlich benötigen Sie eine onChange-Stütze, die beim Anklicken der Checkbox erscheint. Diese Funktion sollte den Status aktualisieren, der steuert, ob dieses Kontrollkästchen aktiviert ist oder nicht. Hier ist ein Beispiel für einen Checkbox Eingang, der für gemacht worden

<input name={ this.props.name } 
     type="checkbox" 
     checked={ this.props.checked } 
     className="cui-checkbox-input" 
     onChange={ this._onChange } 
     value={ this.props.value } /> 

_onChange reagieren ist eine Funktion, die so etwas wie

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