Here is some code that produces a functioning example, it should work if you open it in firefox (I had problems with chrome).
When you click a button, the number beside count is incremented by the value displayed on the button (either 1, 5 or 10).
Code which produces Desired Output
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React tutorial</title>
<script src="https://unpkg.com/react@0.14.7/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link rel="stylesheet" type="text/css" href="lesson5challengestyling.css">
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var CounterChallenge = React.createClass({
getInitialState: function() {
return {
count: 0
}
},
incrementCountByOne: function(value) {
this.setState({
count: this.state.count + 1
})
},
incrementCountByFive: function() {
this.setState({
count: this.state.count + 5
})
},
incrementCountByTen: function() {
this.setState({
count: this.state.count + 10
})
},
render: function() {
return (
<div className="container">
<h1>Count: {this.state.count}</h1>
<button className="btn blue-btn" onClick={this.incrementCountByOne}>Add 1</button>
<button className="btn green-btn" onClick={this.incrementCountByFive}>Add 5</button>
<button className="btn purple-btn" onClick={this.incrementCountByTen}>Add 10</button>
</div>
)
}
});
ReactDOM.render(
<CounterChallenge />,
document.getElementById('app')
);
</script>
</body>
</html>
-----------------------------------------------------------------------
I am trying to write this program in a different way, by creating a button class which only has one increment function(instead of increment1, increment5, increment10 like you can see in the code above.)
I would like the code below to perform exactly as the code above.
I am initialing the state of a variable called count in the the core class(Challenge) which react renders to the DOM. Within the class ChallengeButton, I am incrementing the value stored in count(by either 1, 5 or 10 depending on what value is passed in the variable incCount)
I am not sure what is wrong with it, all I really know is that my browser displays a blank white screen. When I inspect the element I receive no helpful information.
My Program(Which I would like to debug)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React tutorial</title>
<script src="https://unpkg.com/react@0.14.7/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link rel="stylesheet" type="text/css" href="lesson5challengestyling.css">
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var CounterChallenge = React.createClass({
getInitialState: function() {
return {
count: 0
}
},
incrementCountByOne: function(value) {
this.setState({
count: this.state.count + 1
})
},
incrementCountByFive: function() {
this.setState({
count: this.state.count + 5
})
},
incrementCountByTen: function() {
this.setState({
count: this.state.count + 10
})
},
render: function() {
return (
<div className="container">
<h1>Count: {this.state.count}</h1>
<button className="btn blue-btn" onClick={this.incrementCountByOne}>Add 1</button>
<button className="btn green-btn" onClick={this.incrementCountByFive}>Add 5</button>
<button className="btn purple-btn" onClick={this.incrementCountByTen}>Add 10</button>
</div>
)
}
});
ReactDOM.render(
<CounterChallenge />,
document.getElementById('app')
);
</script>
</body>
</html>
-----------------------------------------------------------------------
Accompanying CSS file(Needs no debugging)
body {
padding: 40px;
font-family: "helvetica neue", sans-serif;
}
.container {
width: 600px;
margin: auto;
color: black;
padding: 20px;
text-align: center;
}
.container h1 {
margin: 0;
padding: 20px;
font-size: 36px;
}
.container .btn {
border: 0;
padding: 15px;
margin: 10px;
width: 20%;
font-size: 15px;
outline: none;
border-radius: 3px;
color: #FFF;
font-weight: bold;
}
.btn.blue-btn {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.btn.blue-btn:hover {
background-color: #6FC6FF;
}
.btn.blue-btn {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.btn.blue-btn:hover {
background-color: #6FC6FF;
}
.btn.green-btn {
background-color: #2ecc71;
box-shadow: 0px 5px 0px 0px #15B358;
}
.btn.green-btn:hover {
background-color: #48E68B;
}
.btn.purple-btn {
background-color: #9b59b6;
box-shadow: 0px 5px 0px 0px #82409D;
}
.btn.purple-btn:hover {
background-color: #B573D0;
}
Aucun commentaire:
Enregistrer un commentaire