React - 单个计数器组件 - 父级 IncreaseDecrease 全部

Question

警告：REACT新手还在不断学习。

我有一个挑战，就是要求我建立一个简单的React Counter应用。规则是 不使用Redux，不使用钩子。每一个计数器的功能都是独立的，通过点击按钮来递增或递减。而且！父组件可以对所有的计数器组件进行增量或减量。

单独的递增或递减的例子。

计数器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;

Answer 1

正如你所说，你是一个新手，所以不会尝试任何花哨的东西，试图找到一个简单的解决方案。

让我们有一个父组件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，将增加所有的状态变量值或其他，这是父组件的目标。它还会有三个变量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)。

所以，对于计数器A单独递增两次，所以A的num现在是2.你现在点击递增所有按钮三次，现在会发生的事情是num+props.counter（即现在的3）将给出5，而另一个将有3，因为单个状态是0+传递的值是3。

以下是运行代码，如果你想玩玩的话 例子

Answer 2

尽量使用memo.这有助于维护每个子组件的缓存。

反应钩

Answer 3

好吧，我建议把所有的功能都放在父元素中。然后在其中定义4个函数，handleIncrease，handleDecrease，handleIncreaseAll，handleDecreaseAll。然后，我会有一个数组与计数器，为每个计数器有一个索引，以及它所对应的增加减少值.在handleIncrease中，以及handleDecrease中，你应该传递一个参数来确定当前计数器的索引，并知道它应该增加减少多少。最后，你应该把这些函数作为道具传递给计数器，在Counter中每个increadecrease按钮的onClick事件中，你应该根据情况引用props.handleIncrease或props.handleDecrease。