I am trying to set the checked prop of a checkbox using a state, updated code with handleChange function:
getInitialState: function() {
return {
selected:0,
contactId: 0
};
},
handleChange: function(e) {
var id = this.state.contactId;
console.log(e.target.checked);
if (e.target.checked === true){
console.log('selected');
contactChannel.publish({
channel: "contact",
topic: "selectedContact",
data: {
id: [id]
}});
} else{
basketChannel.publish({
channel: "basket",
topic: "removePersonFromBasket",
data: {
id: [id]
}
});
console.log('deselected flag');
}
},
render: function() {
var id = this.state.contactId;
var isSelected = this.state.selected;
console.log(isSelected);
return (
<div className="contact-selector">
<input type="checkbox"
checked={isSelected}
onChange={this.handleChange} />
</div>
);
}
However, once the checkbox is checked by default I cannot uncheck it, can anyone please tell me how to do this?
Many thanks
I am trying to set the checked prop of a checkbox using a state, updated code with handleChange function:
getInitialState: function() {
return {
selected:0,
contactId: 0
};
},
handleChange: function(e) {
var id = this.state.contactId;
console.log(e.target.checked);
if (e.target.checked === true){
console.log('selected');
contactChannel.publish({
channel: "contact",
topic: "selectedContact",
data: {
id: [id]
}});
} else{
basketChannel.publish({
channel: "basket",
topic: "removePersonFromBasket",
data: {
id: [id]
}
});
console.log('deselected flag');
}
},
render: function() {
var id = this.state.contactId;
var isSelected = this.state.selected;
console.log(isSelected);
return (
<div className="contact-selector">
<input type="checkbox"
checked={isSelected}
onChange={this.handleChange} />
</div>
);
}
However, once the checkbox is checked by default I cannot uncheck it, can anyone please tell me how to do this?
Many thanks
Share Improve this question edited Aug 6, 2015 at 8:13 Bomber asked Aug 6, 2015 at 7:57 BomberBomber 11k27 gold badges97 silver badges175 bronze badges 1-
Can you add the
handleChange
function? – udidu Commented Aug 6, 2015 at 8:00
3 Answers
Reset to default 5In the handleChange
function you are always using the same value for the state of the check box but you need to reverse it.
add this to your handleChange function:
handleChange:function(event){
this.setState({selected: !this.state.selected}); //look at the !NOT sign
}
The problem is because you return with the wrong variable. Changing {isSelected}
with {this.state.selected}
should work.
getInitialState: function() {
return {
selected:0,
contactId: 0
};
},
render: function() {
var id = this.state.contactId;
var isSelected = this.state.selected;
console.log(isSelected);
return (
<div className="contact-selector">
<input type="checkbox"
checked={this.state.selected}
onChange={this.handleChange} />
</div>
);
}
getInitialState: function() {
return {
selected:0,
contactId: 0
};
},
handleChange:function(event){
this.setState({selected: !this.state.selected});
isSelected = this.state.selected;
console.log(isSelected);
}
render: function() {
var id = this.state.contactId;
var isSelected = this.state.selected;
console.log(isSelected);
return (
<div className="contact-selector">
<input type="checkbox"
checked={isSelected}
onChange={this.handleChange} />
</div>
);
}