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

Question

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

这是我作业中的问题：

使用 React 和 Node.js 制作一个计数器应用程序。 用户必须能够单击按钮来增加、减少或重置计数器。 该应用程序必须具有以下组件：Display、DecreaseCount、IncreaseCount、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

您需要在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 }));
};

Answer 2

使用像<Operation />这样的单个组件肯定是我的做法。 但是，根据 OP 的要求，我添加了这个使用指定的所有 4 个组件的示例。

import React, { Component } from 'react';

class IncreaseCount extends Component {
  render(props) {
    return <button onClick={this.props.action}>+</button>;
  }
}

class DecreaseCount extends Component {
  render(props) {
    return <button onClick={this.props.action}>-</button>;
  }
}

class ResetCount extends Component {
  render(props) {
    return <button onClick={this.props.action}>reset</button>;
  }
}

class Display extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };

    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
    this.reset = this.reset.bind(this);
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  decrement() {
    if (this.state.count > 0) {
      this.setState({ count: this.state.count - 1 });
    }
  }

  reset() {
    this.setState({ count: 0 });
  }

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

export default Display;

此版本还可以防止计数器低于 0。