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

警告:非常学习仍要与新手联系。

我面临的挑战是要求我构建一个简单的React Counter应用。规则是:不使用Redux,不使用钩子。每个计数器通过单击按钮独立地增加或减少。和!父组件可以增加或减少所有计数器组件。

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

  • York
    York 回复

    好的,我建议在父元素中包含所有功能。然后在其中定义4个函数,handleIncrease,handleDecrease,handleIncreaseAll,handleDecreaseAll。然后,我将拥有一个包含计数器的数组,以便为​​每个计数器及其相应的递增/递减值都有一个索引。 在handleIncrease和handleDecrease中,应传递一个参数来确定当前计数器的索引,并知道应增加/减少多少。最后,您应该将这些函数作为道具传递给计数器,并且在“计数器”中每个增加/减少按钮的onClick事件上,应视情况引用props.handleIncrease或props.handleDecrease。