ReactJS Managed Checkbox group 2
Managed checkbox field groups.
HTML
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<h1>React Checkbox Group Test</h1>
<div id="main"></div>
JavaScript 1.7
/** @jsx React.DOM */
var CheckboxField = React.createClass({
propTypes: {
values: React.PropTypes.object.isRequired
},
getDefaultProps: function () {
return {
values: {
label: "Place holder text"
}
};
},
render: function() {
const fileData = [{"FL_CD":"LCR_DEP","LOAD_IN":"Y","FILE_AVAILABLE":"Y"},{"FL_CD":"ABS_PREFUNDING","LOAD_IN":"Y","FILE_AVAILABLE":"Y"}];
return (
<div className="cylinders-section col-md-12">
ABVVV
{fileData.map(fileObject => {
return <div key={fileObject.FL_CD}>fileObject.FL_CD </div>})}
</div>
<label htlmFor={this.props.values.id}>
<input type="checkbox"
name={this.props.values.name}
id={this.props.values.id}
value={this.props.values.value}
checked={this.props.values.checked}
onChange={this.handleChange} />
{this.props.values.label} <br />
</label>
);
},
handleChange: function(event) {
// Should use this to set parent's state via a callback func. Then the
// change to the parent's state will generate new props to be passed down
// to the children in the render().
this.props.callBackOnChange(this, event.target.checked);
}
});
var CheckboxFieldGroup = React.createClass({
propTypes: {
defaultValues: React.PropTypes.object.isRequired
},
getInitialState: function () {
// default props passed in to CheckboxFieldGroup (this componenent) will be used to set up the state. State
// is stored in this component, and *not* in the child CheckboxField components. The state store in this
// component will, in turn, generate the props for the child CheckboxField components. When the latter
// are updated (i.e. clicked) by the...