react: get custom checkbox's checked attribute

Question

I want to so some customization with checkbox, it can look like this:

so I wrap my custom checkbox into a React Component:

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;

and my container is like this:

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;

you can see that, I tried to bind this.refs.c.checked in the onChange callback, but it doesn't work.

so, how can I get the checked state of my custom checkbox in Test component in the _handleChange function?

Oleksandr T. · Accepted Answer · 2016-01-02 07:54:36Z

27

In this case you don't need use refs because you can get checked property from e argument

// 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

or if you want pass only checked property you can do it like this

// 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

answered Jan 2, 2016 at 7:54

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Osv · Accepted Answer · 2019-12-27 01:15:26Z

This is a simple example you can use to get the custom value or the value of your checked box, and also to check if the box is checked.

export default class SearchBoxContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      boxAll: false
    };
  }

  handleChange = event => {
    this.setState({ boxAll: event.target.checked }, () => {
      console.log("This returned true or false", this.state.boxAll);
    });
  };

  render() {
    return (
      <div className="search-container">
        <SearchBox />
        <div className="filter-country">
          <h1>Filter</h1>
          <div className="filter-country-container">
            <div>
              <input
                type="checkbox"
                id="checkBoxUS"
                name="US"
                value="US"
                onChange={this.handleChange}
              />
              <label htmlFor="US">All Jobs</label>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

It is important to know that in this example, I used the "setState()" callback just for demonstration purposes, but you can pass the value to other components by props or wherever method you prefer. Also, when the checkbox is checked the value will return "true"

Collectives™ on Stack Overflow

react: get custom checkbox's checked attribute

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related