react template
HTML
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
/**
* @jsx React.DOM
*/
var CarForm = React.createClass({
render: function() {
return ( < div >
< button onClick = {
this.handleRemoveClick
} > - < /button> < input defaultValue = {
this.props.formId
}
/> < input type = "checkbox"
defaultChecked = {
this.props.formId === 2
}
/> {
'I am ' + this.props.formId
} < /div>
);
},
handleRemoveClick: function(e) {
e.preventDefault();
this.props.onRemove(this.props.formId);
},
});
var CarForms = React.createClass({
getInitialState: function() {
return {
formIds: [1, 2]
};
},
render: function() {
return ( < div > {
this.state.formIds.map(function(formId) {
console.log(formId);
return <CarForm formId = {
formId
}
onRemove = {
this.handleRemove
}
/>;
}.bind(this))
} < /div>);
},
handleRemove: function(id) {
this.state.formIds.forEach(function(formId, i) {
if (id == formId) {
this.state.formIds.splice(i, 1);
}
}.bind(this));
this.forceUpdate();
},
});
React.renderComponent( < CarForms / > , document.body);