Created
May 29, 2015 23:13
-
-
Save anonymous/1daf8c806939e7614c00 to your computer and use it in GitHub Desktop.
かんすうがた くりっく かうんたー w
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>かんすうがた くりっく かうんたー w</title> | |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> | |
</head> | |
<body> | |
<h1>かんすうがた くりっく かうんたー w</h1> | |
<p> | |
ES6のconstを使っているので、最新のFirefoxとChrome推奨です。 | |
破壊的代入やArrayの破壊的メソッドは使って無いはず。 | |
</p> | |
<div id="content"></div> | |
<script src="https://fb.me/react-0.13.3.min.js"></script> | |
<script src="https://fb.me/JSXTransformer-0.13.1.js"></script> | |
<script type="text/jsx"> | |
(function() { | |
const ClickCounter = React.createClass({ | |
getInitialState: function() { | |
return { | |
data: Array.apply(null, Array(this.props.number)).map(function() {return 0;}), | |
total: 0 | |
}; | |
}, | |
handleClick: function(number) { | |
const newData = this.state.data.map(function(v, i) {return v + ((number === i) ? 1 : 0)}); | |
const newTotal = this.state.total + 1; | |
this.setState({data: newData, total: newTotal}); | |
}, | |
render: function() { | |
return ( | |
<div className="clickCounter"> | |
<ChildrenCounter data={this.state.data} total={this.state.total} onClick={this.handleClick}/> | |
</div> | |
); | |
} | |
}); | |
const ChildrenCounter = React.createClass({ | |
render: function() { | |
const children = this.props.data.map(function(v, i) { | |
return <ChildCounter number={i} count={v} total={this.props.total} onClick={this.props.onClick}/>; | |
}, this); | |
return ( | |
<div className="childrenCounter row"> | |
{children} | |
</div> | |
); | |
} | |
}); | |
const ChildCounter = React.createClass({ | |
onClick: function() { | |
return this.props.onClick(this.props.number); | |
}, | |
render: function() { | |
return ( | |
<div className="childCounter col-sm-3 col-md-2 panel panel-default text-center" onClick={this.onClick}> | |
<h3>ばんごう {this.props.number}</h3> | |
<p>このわく <span className="badge">{this.props.count}</span></p> | |
<p>とーたる <span className="badge">{this.props.total}</span></p> | |
</div> | |
); | |
} | |
}); | |
React.render(<ClickCounter number={4}/>, document.getElementById('content')); | |
}).call(this); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment