Skip to content

Instantly share code, notes, and snippets.

@2garryn
Created December 25, 2014 14:21
Show Gist options
  • Save 2garryn/d03007bfb803e31933ff to your computer and use it in GitHub Desktop.
Save 2garryn/d03007bfb803e31933ff to your computer and use it in GitHub Desktop.
var Calcs = React.createClass({
getInitialState: function() {
return {count: ''};
},
handleClickNum: function(index) {
this.setState({count: index});
},
render: function() {
ParentThis = this;
var boundCarry = function(Item) {
return ParentThis.handleClickNum.bind(ParentThis, Item)
};
return (
<div>
<Label count={this.state.count}/>
<LabeledButtonGrid boundFun={boundCarry} />
</div>
)}
});
var LabeledButtonGrid = React.createClass({
render: function() {
boundFun = this.props.boundFun;
return (
<div>
<div className = "row">
<LabeledButton boundFun={boundFun} number={'1'} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'2'} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'3'} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'4'} addCls={'col-md-3'} />
</div>
<div className = "row">
<LabeledButton boundFun={boundFun} number={'5'} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'6'} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'7'} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'8'} addCls={'col-md-3'} />
</div>
<div className = "row">
<LabeledButton boundFun={boundFun} number={'9'} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'0'} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'+'} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'-'} addCls={'col-md-3'} />
</div>
<div className = "row">
<LabeledButton boundFun={boundFun} number={'X'} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'/'} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'='} addCls={'col-md-3'} />
<LabeledButton boundFun={boundFun} number={'CE'} addCls={'col-md-3'} />
</div>
</div>
)}
});
var LabeledButton = React.createClass({
render: function() {
number = this.props.number;
boundClickFun = this.props.boundFun(number);
classN = "btn btn-default calcnum " + this.props.addCls;
return <button onClick={boundClickFun} className={classN}><h1>{number}</h1></button>;
}});
var Label = React.createClass({
render: function() {
count = this.props.count;
return <div> {count} </div>
}
})
React.render(
<Calcs />,
document.getElementById('example')
);
@develop7
Copy link

<div className = "row">

а не

<div class="row">

?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment