React - 单个计数器组件 - Parent Increase/Decrease 全部
React - Individual Counter Components - Parent Increase/Decrease All
警告:REACT 新手仍在学习。
我遇到了一个挑战,要求我构建一个简单的 React Counter 应用程序。规则是:不使用 Redux,不使用钩子。每个计数器独立运行,通过单击按钮增加或减少。和! Parent 组件可以递增或递减所有计数器组件。
个体increment/decrement的EX:
计数器 1 = 2
计数器 2 = 4
计数器 3 = 6
EX Increment ALL 会做如下改动:
计数器 1 = 3
计数器 2 = 5
计数器 3 = 7
我知道这涉及在 parent 组件中定义的回调函数,我只是对如何实现它感到困惑。我现在有一个非常 non-efficient 的方法来做到这一点。谁能指导我如何以更有效的方式进行设置的正确方向?
这是我的Parent:
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;
这是我的Child:
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;
尝试使用memo.This有助于维护每个子组件的缓存。
好的,我建议在父元素中包含所有功能。然后在里面定义4个函数,handleIncrease,handleDecrease,handleIncreaseAll,handleDecreaseAll。然后我将有一个带有计数器的数组,每个计数器都有一个索引以及它具有的相应 increasing/decreasing 值。
在handleIncrease 和handleDecrease 中,你应该传递一个参数来确定当前计数器的索引并知道它应该是多少increase/decrease。最后,您应该将这些功能作为道具传递给计数器,并且在计数器中每个 increase/decrease 按钮的 onClick 事件上,您应该根据情况参考 props.handleIncrease 或 props.handleDecrease。
正如您所说,您是新手,所以不会尝试任何花哨的东西,而是会尝试找到一个简单的解决方案。
让我们将父组件 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,它们将增加所有状态变量值,否则,这是父组件的目标。它还将具有三个 variables/state 变量,这些变量将传递给各个计数器组件。
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.
这里是 运行 代码,如果你想玩 Example
警告:REACT 新手仍在学习。
我遇到了一个挑战,要求我构建一个简单的 React Counter 应用程序。规则是:不使用 Redux,不使用钩子。每个计数器独立运行,通过单击按钮增加或减少。和! Parent 组件可以递增或递减所有计数器组件。
个体increment/decrement的EX:
计数器 1 = 2
计数器 2 = 4
计数器 3 = 6
EX Increment ALL 会做如下改动:
计数器 1 = 3
计数器 2 = 5
计数器 3 = 7
我知道这涉及在 parent 组件中定义的回调函数,我只是对如何实现它感到困惑。我现在有一个非常 non-efficient 的方法来做到这一点。谁能指导我如何以更有效的方式进行设置的正确方向?
这是我的Parent:
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;
这是我的Child:
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;
尝试使用memo.This有助于维护每个子组件的缓存。
好的,我建议在父元素中包含所有功能。然后在里面定义4个函数,handleIncrease,handleDecrease,handleIncreaseAll,handleDecreaseAll。然后我将有一个带有计数器的数组,每个计数器都有一个索引以及它具有的相应 increasing/decreasing 值。 在handleIncrease 和handleDecrease 中,你应该传递一个参数来确定当前计数器的索引并知道它应该是多少increase/decrease。最后,您应该将这些功能作为道具传递给计数器,并且在计数器中每个 increase/decrease 按钮的 onClick 事件上,您应该根据情况参考 props.handleIncrease 或 props.handleDecrease。
正如您所说,您是新手,所以不会尝试任何花哨的东西,而是会尝试找到一个简单的解决方案。
让我们将父组件 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,它们将增加所有状态变量值,否则,这是父组件的目标。它还将具有三个 variables/state 变量,这些变量将传递给各个计数器组件。
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.
这里是 运行 代码,如果你想玩 Example