反应：获取自定义复选框的选中属性

我想使用复选框进行一些自定义，如下所示：

所以我将自定义复选框包装到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 (
      

        
          
            
              
              
            
            {this.props.text.length > 0 ?
              {this.props.text} : null
            }
          
        
      );
    }
});

module.exports = CkCheckbox;

我的容器是这样的：

var React = require('react');

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

var Test = React.createClass({
  render: function() {
    return (
      

        
      
    );
  },

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

module.exports = Test;

您可以看到，我尝试this.refs.c.checked在onChange回调中进行绑定，但是它不起作用。

因此，如何checked state在_handleChange函数的“测试”组件中获取自定义复选框的？

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

// CkCheckbox component
 

// 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);
},



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

Example