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