react：获取自定义复选框的checked属性

Question

我想用复选框进行一些自定义，它看起来像这样：

所以我将自定义复选框包装到React组件中：

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 (
            <div className="ck-checkbox">
                <label>
                    <input type="checkbox" name={this.props.name} ref="c" defaultChecked={this.props.defaultChecked} onChange={this.props.onChange.bind(this, this.refs.c.checked)}/>
                    <span className="icons">
                        <span className="icon-checked-o icon-true"></span>
                        <span className="icon-circle-o icon-false"></span>
                    </span>
                    {this.props.text.length > 0 ?
                    <span className="ck-checkbox-text">{this.props.text}</span> : null
                    }
                </label>
            </div>
            );
    }
});

module.exports = CkCheckbox;

我的容器是这样的：

var React = require('react');

var CkCheckbox = require('./CkCheckbox.js');

var Test = React.createClass({
    render: function() {
        return (
            <div>
                <CkCheckbox onChange={this._handleChange}/>
            </div>
            );
    },

    _handleChange: function(checked, e) {
        console.log(checked)
    }
});

module.exports = Test;

你可以看到，我试图在this.refs.c.checked回调中绑定onChange，但它不起作用。

那么，如何在_handleChange函数中的Test组件中获取我的自定义复选框的checked state？

Answer 1

在这种情况下，您不需要使用refs，因为您可以从e参数获取已检查的属性

// CkCheckbox component
 <input type="checkbox" 
     name={this.props.name} 
     defaultChecked={this.props.defaultChecked} 
     onChange={ this.props.onChange } />

// Test component
_handleChange: function(e) {
  var checked = e.target.checked;
  console.log(checked)
}

Example

或者如果你想只传递checked属性，你可以这样做

// CkCheckbox component
handleChange: function (e) {
  this.props.onChange(e.target.checked);
},

<input type="checkbox" 
   name={this.props.name} 
   defaultChecked={this.props.defaultChecked} 
   onChange={ this.handleChange } />

// in Test component 
_handleChange: function(checked) {
  console.log(checked)
}

Example