title: react: get custom checkbox's checked attribute
body: <p>I want to so some customization with checkbox, it can look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/sSIQr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sSIQr.png" alt="enter image description here"></a></p>
  
  <p>so I wrap my custom checkbox into a React Component:</p>
  
  <pre><code>require('../../less/ck-checkbox.less');
  var React = require('react');
  
  var CkCheckbox = React.createClass({
    propTypes: {
      name: React.PropTypes.string,
      text: React.PropTypes.string,
      defaultChecked: React.PropTypes.bool,
      onChange: React.PropTypes.func
    },
    getDefaultProps: function() {
      return {
        name: 'checkbox',
        text: '',
        defaultChecked: false,
        onChange: function () {}
      };
    },
    render: function() {
      return (
        &lt;div className="ck-checkbox"&gt;
          &lt;label&gt;
            &lt;input
              type="checkbox"
              name={this.props.name}
              ref="c"
              defaultChecked={this.props.defaultChecked}
              onChange={this.props.onChange.bind(this, this.refs.c.checked)}
            /&gt;
              &lt;span className="icons"&gt;
                &lt;span className="icon-checked-o icon-true"&gt;&lt;/span&gt;
                &lt;span className="icon-circle-o icon-false"&gt;&lt;/span&gt;
              &lt;/span&gt;
              {this.props.text.length &gt; 0 ?
                &lt;span className="ck-checkbox-text"&gt;{this.props.text}&lt;/span&gt; : null
              }
            &lt;/label&gt;
          &lt;/div&gt;
        );
      }
  });
  
  module.exports = CkCheckbox;
  </code></pre>
  
  <p>and my container is like this:</p>
  
  <pre><code>var React = require('react');
  
  var CkCheckbox = require('./CkCheckbox.js');
  
  var Test = React.createClass({
    render: function() {
      return (
        &lt;div&gt;
          &lt;CkCheckbox onChange={this._handleChange}/&gt;
        &lt;/div&gt;
      );
    },
  
    _handleChange: function(checked, e) {
      console.log(checked)
    }
  });
  
  module.exports = Test;
  </code></pre>
  
  <p>you can see that, I tried to bind <code>this.refs.c.checked</code> in the <code>onChange</code> callback, but it doesn't work.</p>
  
  <p>so, how can I get the <code>checked state</code> of my custom checkbox in Test component in the _handleChange function?</p>