Reputation: 165
I have this code in Reactjs that display a label with a checkbox
import React, { Component, PropTypes } from 'react';
class Test extends Component {
constructor() {
super(...arguments);
}
checkboxClicked(e) {
this.props.test.clicked = e.target.checked;
}
render() {
return (
<li>
<label>
<input type="checkbox" value={this.props.test.id} checked={this.props.test.clicked} onChange={this.checkboxClicked.bind(this)} />
{this.props.test.text}
</label>
</li>
);
}
}
export default Test;
The checkbox and text is well displayed, but when I click on it, it refused to get checked. The value of this.props.test.clicked
is changed but not the ui in the browser.
Can somebody tell me that I am missing?
Upvotes: 1
Views: 662
Reputation: 4453
It's not recommended to change props.
Try to use state
instead.
import React, { Component, PropTypes } from 'react';
class Test extends Component {
constructor() {
super(...arguments);
this.state = { checked: this.props.test.clicked };
}
checkboxClicked(e) {
this.setState({checked : e.target.checked});
}
render() {
return (
<li>
<label>
<input type="checkbox" value={this.props.test.id} checked={this.state.checked} onChange={this.checkboxClicked.bind(this)} />
{this.props.test.text}
</label>
</li>
);
}
}
export default Test;
Upvotes: 1