React single, managed checkbox field, wrong!
Using Reactjs, a single, managed element done incorrectly. Click on the checkbox and nothing changes!
by BrownieBoy
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<h3>React, single managed input element, incorrect</h3>
<div id="main"></div>
JavaScript 1.7
var CheckboxInput = React.createClass({
getInitialState: function () {
return {
checked: this.props.checked || false
};
},
render: function () {
return (
<label>
<input type="checkbox"
name={this.props.name}
checked={this.state.checked}
value={this.props.value} />
{this.props.label}
</label>
);
}
});
var question = { label: "Apples", name: "q1", value: "apples" };
React.render(<CheckboxInput label={question.label} name={question.name} />, document.getElementById("main"));