Reactjs 反应-单个计数器组件-父级全部增加/减少

警告：仍在学习的新手

我有一个挑战，那就是需要我建立一个简单的反应计数器应用程序。规则是：不使用Redux，不使用hook。每个计数器通过单击按钮独立地执行递增或递减操作。还有！父组件可以增加或减少所有计数器组件

counterA: 0,
counterB: 0,
counterC: 0

单个增量/减量的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;

从“React”导入React；
从“./组件/计数器”导入计数器；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.counterElement1=React.createRef（）；
this.counterElement2=React.createRef（）；
this.counterElement3=React.createRef（）；
}
handleAllIncrease=（）=>{
log（“hello应用程序增加”）
this.counterElement1.current.handleIncrease（）；
this.counterElement 2.current.handleIncrease（）；
this.counterElement 3.current.handleIncrease（）；
}
手动下降=（）=>{
log（“你好应用程序减少”）
this.counterElement 1.current.HandleDecrese（）；
this.counterElement 2.current.HandleDecrese（）；
this.counterElement 3.current.HandleDecrese（）；
}
render（）{
返回(
this.handleAllIncrease（）}>增加所有
this.handleAllDecrease（）}>全部减少
);
}
}
导出默认应用程序；

这是我的孩子：

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;

从“React”导入React；
类计数器扩展了React.Component{
状态={
数字：0，
}
handleIncrease=（）=>{
log（“hello increase”）
这是我的国家({
num:this.state.num+1，
})
}
handleDecrease=（）=>{
log（“你好”）
这是我的国家({
num:this.state.num-1，
})
}
render（）{
返回(
{this.state.num}

+
-
)
}
}
导出默认计数器；

尝试使用memo。这有助于维护每个子组件的缓存

---

好的，我建议在父元素中包含所有功能。然后在其中定义4个函数：handleIncrease、handledecrese、handleIncreaseAll、handledecreseAll。然后我会有一个计数器数组，每个计数器都有一个索引，以及相应的递增/递减值。

---

在handleIncrease和HandleDecrese中，您应该传递一个参数来确定当前计数器的索引，并知道它应该增加/减少多少。最后，您应该将这些函数作为道具传递给计数器，在计数器中每个增加/减少按钮的onClick事件中，您应该根据具体情况参考props.handleIncrease或props.handledcrease。

正如您所说，您是新手，因此不会尝试任何花哨的东西，并尝试找到简单的解决方案

让我们将父组件应用程序定义为

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>
    );
  }
}

现在，让我们看看子组件的作用

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;

从“React”导入React；
类计数器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数字：0
};
}
handleIncrease=（）=>{
this.setState（prevState=>({
num:prevState.num+1
}));
};
handleDecrease=（）=>{
this.setState（prevState=>({
num:prevState.num-1
}));
};
render（）{
返回(
{this.state.num+this.props.counter}

+
-
);
}
}
导出默认计数器；

最初，我们定义了一个状态变量num，当分别执行递增和递减时，该变量会发生变化

其余的东西都是正常的反应，我唯一使用的技巧就是线条

<p>{this.state.num + this.props.counter}</p>

{this.state.num+this.props.counter}

这一行的作用是将从父级传递的任何值添加到当前状态值

所以，对于计数器A，单独递增两倍，所以A的num现在是2。 您现在三次单击“全部递增”按钮，现在将发生的是num+props.counter（即现在的3）将给出5，另一个将给出3，因为单个状态为0+传递值为3

---

如果你想玩游戏，下面是运行代码

她提到不要使用钩子。哦！好的，我明白了！是的，这完全有道理。非常感谢您的帮助和透彻的解释！很高兴知道这有帮助^