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

Question

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

这是我作业中的问题:

Make a counter application using React and Node.js. The user must have the ability to click a button to increase, decrease, or reset a counter. The app must have the following components: Display, DecreaseCount , IncreaseCount, ResetCount. Pass the appropriate functions to be used and current counter value to each component.

我不确定为这些简单操作创建组件的意义是什么。我也不明白如果我向它们传递一个函数和一个要处理的值，那么什么会使这些算术组件变得独特。但我假设分配的目的是表明您可以将状态传递给子级，在子级中对其进行处理，然后将处理结果传递回父级以存储在其状态中。

这是主页，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

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

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

完整的示例可能如下所示:

class Display extends Component {
  state = {
    count: 0
  };

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

  render() {
    return (
      <div>
        <h2>{this.state.count} </h2>
        <Operation
          name="+"
          count={this.state.count}
          operation={this.increment}
        />
        <Operation
          name="-"
          count={this.state.count}
          operation={this.decrement}
        />
        <Operation
          name="Reset"
          count={this.state.count}
          operation={this.reset}
        />
      </div>
    );
  }
}

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

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

请注意，您不必将计数器值传递给每个Operation并使用函数setState:

increment = () => {
  this.setState(prev => ({ count: prev.count + 1 }));
};