将带有参数的函数传递给子组件，并将返回值发送回父组件，以在reactjs中存储为父组件状态

Question

请原谅，我是编程和JavaScript / React的新手。

这是我分配的问题：

创建一个反应“计数器”，您可以单击该按钮来增加，减少或重置计数器。您需要创建4个组件：Display，IncreaseCount，DecreaseCount，ResetCount。将计数器值（和必需的功能）传递给每个组件。

我不确定为那些简单的操作创建组件的意义是什么。我也不清楚如果我将它们传递给函数和值来使用时，那些算术组件将变得独特。但是我假设任务的重点是表明您可以将状态传递给子级，在子级中对其进行处理，然后将处理后的结果传递回父级以存储在其状态中。

这里是主页Display.js。现在，我只是试图使添加功能起作用：

import React, { Component } from 'react';
import IncreaseCount from './IncreaseCount';
import DecreaseCount from './DecreaseCount';
import ResetCount from './ResetCount';

class Display extends Component {
  constructor(props) {
    super(props);

    this.increment = this.increment.bind(this);

    this.state = {
      count: 0
    };
  }

  increment = numToInc => {
    this.setState({ count: numToInc++ });
  };
  decrement = numToDec => {
    this.setState({ count: numToDec-- });
  };
  reset = numToReset => {
    numToReset = 0;
    this.setState({ count: numToReset });
  };

  render() {
    return (
      <div>
        <h2>{this.state.count} </h2>
        <IncreaseCount count={this.state.count} operation={this.increment} />
        <DecreaseCount count={this.state.count} operation={this.decrement} />
        <IncreaseCount count={this.state.count} operation={this.reset} />
      </div>
    );
  }
}

export default Display;

这是IncreaseCount组件类：

import React, { Component } from 'react';

class IncreaseCount extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

  buttonClick = () => {
    this.setState({ count: this.props.count }); // I am pretty sure this isn't necessary
    this.props.operation(this.state.count);
  };

  render() {
    return <button onClick={this.buttonClick}></button>;
  }
}

export default IncreaseCount;

它不会引发任何错误，但不会更改增加计数或显示计数属性的值。我期望两者都可以同步进行。 我的目标是将递增的值发送​​回Display进行显示。我编写并传递递增函数的方式是否存在问题？

Answer 1

您需要在this.props.count中使用IncreaseCount

class IncreaseCount extends Component {
  buttonClick = () => {
    this.props.operation(this.props.count);
  };

  render() {
    return <button onClick={this.buttonClick}></button>;
  }
}