Make checked/unchecked attribute onChange checkbox in Reactjs

Question

I have a problem in my react component. I have custom styled checkboxes like this http://jsfiddle.net/fvdbcch0/

I want to click on my component or label to check or uncheck input.

Currently it's working only on basic styles only if I click exactly on input.

How can I change checked state onChange properly ?

Code:

 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);

And Styles for my custom inputs:

/* 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;
}

Many thanks for help with this.

finalfreq · Accepted Answer · 2016-09-14 21:53:22Z

2

Your checkbox is missing a few props that are needed in order for it to work. You need to be able to tell a checkbox if its checked or not using props or state. you also need to give each checkbox a value so when you check it you will actually have a value to work with. and lastly you need a onChange prop that will occur when the checkbox is clicked. this function should update whatever state is controlling whether that particular checkbox is checked or not. Here is an example of a checkbox input that has been made for react

<input name={ this.props.name }
      type="checkbox"
      checked={ this.props.checked }
      className="cui-checkbox-input"
      onChange={ this._onChange }
      value={ this.props.value } />

_onChange is a function that would look something like

_onChange: function(event) { 
   // do stuff using the event to grab needed values
}

answered Sep 14, 2016 at 21:53

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

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

1 Comment

Robson Over a year ago

Hmm, I understand you I guess. I changed a little my code with checked state, but I get stuck with changing this state onChange ? Could you look at this now if you have some time and let me know where I made a mistakes ?

Robson · Accepted Answer · 2016-09-14 22:29:27Z

1

Ok, I found solution.

I added onClick={ this._onChange } to my label in component, and it works!

answered Sep 14, 2016 at 22:29

Robson

1,2974 gold badges21 silver badges46 bronze badges

1 Comment

finalfreq Over a year ago

Awesome! A clean way of doing that onChange function as well is to just do this.setState({ checked: !this.state.checked });

Collectives™ on Stack Overflow

Make checked/unchecked attribute onChange checkbox in Reactjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related