ReactJS:创建一个按动态值递增的计数器类(通过属性传递并存储在状态中)
ReactJS:创建一个按动态值递增的计数器类(通过属性传递并存储在状态中)
提问于 2019-06-09 21:33:50
这里有一些代码，它产生了一个功能示例，如果你在firefox中打开它，它应该可以工作(我在chrome上遇到了问题)。
单击按钮时，字数旁边的数字将按按钮上显示的值( 1、5或10)递增。
生成所需输出的代码
<!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>我试图以一种不同的方式编写这个程序，创建一个只有一个递增函数的按钮类(而不是上面代码中看到的increment1、increment5、increment10 )。
我希望下面的代码完全像上面的代码一样执行。
我在核心类(Challenge)中初始化了一个名为count的变量的状态，它会呈现给DOM。在类ChallengeButton中，我递增存储在count中的值(递增1、5或10，具体取决于传递给变量incCount的值)
我不确定它出了什么问题，我只知道我的浏览器显示一个空白的白屏。当我检查元素时，我没有收到任何有用的信息。
调试我的程序(我想调试它)
<!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.2/browser.min.js"></script>
<link rel="stylesheet" type="text/css" href="lesson5challengestyling.css">
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var ChallengeButton = React.createClass({
increment: function(){
this.setState({
count: this.state.count + this.props.incCount
})
},
render: function(){
return{
<button onClick={this.increment} incCount={this.props.incCount}></button>
}
}
});
var Challenge = React.createClass({
getInitialState: function(){
return{
count: 0
},
render: function(){
return {
<div>
<h1>Count: {this.state.count}</h1>
<ChallengeButton className="blue-btn" incCount='1'/>
<ChallengeButton className="red-btn" incCount='5' />
<ChallengeButton className="green-btn" incCount='10' />
</div>
}
}
});
ReactDOM.render(
<Challenge />,
document.getElementById('app')
);
</script>
</body>
</html>附带的CSS文件(不需要调试)
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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-10 00:37:44
我想通了。这里有几件重要的事情。
这些按钮是作为函数而不是类创建的。
var ChallengeButton = function(props) {
return (
<button className={props.style} onClick={props.func}> Add {props.incCount} </button>
)
};并将increment函数移到主类中，该函数的参数为单词"props“。当引用ChallengeButton的道具时，我必须使用props.*，但不能使用this.props.*；如果Challenge类有道具，那么我可以在Challenge类中使用this.props.*。
这是一个工作脚本。
<script type="text/babel">
var ChallengeButton = function(props) {
return (
<button className={props.style} onClick={props.func}> Add {props.incCount} </button>
)
};
var Challenge = React.createClass({
getInitialState: function() {
return {
count: 0
}
},
increment: function(value) {
this.setState({
count: this.state.count + value
})
},
render: function() {
return (
<div className="container">
<h1>Count: {this.state.count}</h1>
<ChallengeButton style="btn blue-btn" incCount='1' func={this.increment.bind(this, 1)} />
<ChallengeButton style="btn green-btn" incCount='5' func={this.increment.bind(this, 5)} />
<ChallengeButton style="btn purple-btn" incCount='10' func={this.increment.bind(this, 10)} />
</div>
)
}
});
ReactDOM.render(
<Challenge />,
document.getElementById('app')
);
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56515015
复制相关文章
相似问题