<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="react@*" data-semver="0.14.2" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body class="container">
<div id="example" class=""></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
var Domanda = React.createClass({
render: function() {
return ( < h1 >
quanto fa 1 + 1 < /h1>
)
}
});
var Risposta = React.createClass({
propTypes: {
val: React.PropTypes.number
},
whenClick: function() {
this.props.handler(this.props.val);
},
render: function() {
return (
<button onClick = {this.whenClick}> {this.props.val} </button>
)
}
});
var Content = React.createClass({
getInitialState: function() {
return {
risposta: ''
}
},
setRisposta: function(r) {
this.setState({
risposta: r
});
},
whenClick: function(e) {
//questa era un'altra soluzione per accedere alla risposta
// ma non è eleante
this.setState({
risposta: $(e.target).data('val')
});
},
render: function() {
return ( <div>
<Domanda />
<Risposta val={"2"} handler = {this.setRisposta}/>
-
<Risposta val={3} handler = {this.setRisposta}/>
<br/><br/>
la tua risposta è: {this.state.risposta} </div>
)
}
});
React.render( < Content / > ,
document.getElementById('example')
);
/* Styles go here */