I have a problem in my react ponent. I have custom styled checkboxes like this /

I want to click on my ponent 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
  };
},
ponentDidMount: 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": "fortable"}, {"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.

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

I want to click on my ponent 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
  };
},
ponentDidMount: 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": "fortable"}, {"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.

• javascript
• jquery
• reactjs

Share Improve this question Follow edited Sep 14, 2016 at 22:15 Robson asked Sep 14, 2016 at 21:41 RobsonRobson 1,28744 gold badges2121 silver badges4545 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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
}

Ok, I found solution.

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