reactjs - React - 单个计数器组件 - 父级增加/减少所有
问题描述
警告:对仍在学习的新手做出反应。
我有一个挑战,需要我构建一个简单的 React Counter 应用程序。规则是:不使用 Redux,不使用钩子。每个计数器都独立地通过单击按钮来增加或减少。和!Parent 组件可以递增或递减所有 Counter 组件。
个别递增/递减的 EX:
计数器 1 = 2
计数器 2 = 4
计数器 3 = 6
EX Increment ALL 将进行以下更改:
计数器 1 = 3
计数器 2 = 5
计数器 3 = 7
我知道这涉及在父组件中定义的回调函数,我只是对如何实现它感到困惑。我现在有一种非常低效的方法来做到这一点。谁能引导我朝着正确的方向以更有效的方式进行设置?
这是我的父母:
import React from 'react';
import Counter from './components/Counter';
class App extends React.Component {
constructor(props) {
super(props);
this.counterElement1 = React.createRef();
this.counterElement2 = React.createRef();
this.counterElement3 = React.createRef();
}
handleAllIncrease = () => {
console.log("hello App Increase")
this.counterElement1.current.handleIncrease();
this.counterElement2.current.handleIncrease();
this.counterElement3.current.handleIncrease();
}
handleAllDecrease = () => {
console.log("hello App Decrease")
this.counterElement1.current.handleDecrease();
this.counterElement2.current.handleDecrease();
this.counterElement3.current.handleDecrease();
}
render() {
return (
<div className="App">
<button onClick={() => this.handleAllIncrease()}>Increase all</button>
<button onClick={() => this.handleAllDecrease()}>Decrease all</button>
<Counter ref={this.counterElement1} />
<Counter ref={this.counterElement2}/>
<Counter ref={this.counterElement3}/>
</div>
);
}
}
export default App;
这是我的孩子:
import React from 'react';
class Counter extends React.Component {
state = {
num: 0,
}
handleIncrease = () => {
console.log("hello increase")
this.setState({
num: this.state.num + 1,
})
}
handleDecrease = () => {
console.log("hello decrease")
this.setState({
num: this.state.num - 1,
})
}
render() {
return (
<div>
<p>{this.state.num}</p>
<button onClick={this.handleIncrease}>+</button>
<button onClick={this.handleDecrease}>-</button>
</div>
)
}
}
export default Counter;
解决方案
正如你所说,你是一个新手,所以不会尝试任何花哨的东西并尝试找到一个简单的解决方案。
让我们有一个父组件 App 定义为
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
counterA: 0,
counterB: 0,
counterC: 0
}
}
handleAllIncrement = () => {
this.setState(prevState => ({
counterA: prevState.counterA + 1,
counterB: prevState.counterB + 1,
counterC: prevState.counterC + 1
}))
}
handleAllDecrement = () => {
this.setState(prevState => ({
counterA: prevState.counterA - 1,
counterB: prevState.counterB - 1,
counterC: prevState.counterC - 1
}))
}
render() {
return (
<Fragment>
<div style={{display: 'flex', justifyContent: 'space-evenly'}}>
<Counter counter={this.state.counterA} />
<Counter counter={this.state.counterB} />
<Counter counter={this.state.counterC} />
</div>
<br />
<div style={{textAlign: 'center'}}>
<button onClick={this.handleAllIncrement}> + All </button>
<button onClick={this.handleAllDecrement}> - All </button>
</div>
</Fragment>
);
}
}
它包含两个方法 handleAllIncrement 和 handleAllDecrement ,它们将增加所有状态变量的值,否则,这是父组件的目标。它还将具有三个变量/状态变量,这些变量/状态变量将传递给各个计数器组件。
counterA: 0,
counterB: 0,
counterC: 0
现在,让我们看看子组件做了什么。
import React from "react";
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
num: 0
};
}
handleIncrease = () => {
this.setState(prevState => ({
num: prevState.num + 1
}));
};
handleDecrease = () => {
this.setState(prevState => ({
num: prevState.num - 1
}));
};
render() {
return (
<div>
<p>{this.state.num + this.props.counter}</p>
<button onClick={this.handleIncrease}>+</button>
<button onClick={this.handleDecrease}>-</button>
</div>
);
}
}
export default Counter;
最初,我们定义一个状态变量 num ,当单独执行递增和递减时会更改它。
其余的东西反应正常,我应用的唯一技巧是线
<p>{this.state.num + this.props.counter}</p>
这一行的作用是将父级传递的任何值添加到当前状态值。
因此,对于计数器 A 单独增加了两次,因此 A 的 num 现在是 2。您现在单击了所有按钮三次增加现在会发生什么是 num + props.counter(即现在 3)将给出 5 而另一个将有 3 作为个人状态为 0 + 传递的值为 3。
如果您想玩一下示例,这里是运行代码
推荐阅读
- c# - 使用 Core 2.0 和 JWT 身份验证的 Swagger
- python - 如何将具有不等列表的字典作为值转换为 csv
- eclipse-plugin - Eclipse 插件中的多个 Ecore/EMF 模型
- sass - SCSS 变量将背景 URL 从路径切换到 ASSET_URL
- r - 在 tibble 中取消列出嵌套列
- android - 自动配置 Android 设置?
- javascript - 将滚动位置设置为隐藏元素reactjs的顶部
- ssis - SSIS Odata VSTS WIQL 检索元数据时出错
- ios - 创建需要 NSCoder 的子类实例
- python - 如何使用 cmd2 和 wxPython 创建非阻塞 GUI?