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

Question

Please forgive me, I am new to programming and JavaScript/React...

This is the question from my assignment:

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.

I'm not sure what the point is of creating components for those simple operations. I also don't understand what will make those arithmetical components unique if I'm passing them both a function and a value to work on. But I am assuming the point of the assignment is to show that you can pass state to a child, work on it within the child, and then pass the worked-on result back to the parent to be stored in its state.

Here is the main page, Display.js. For now I'm just trying to get the add functionality to work:

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;

And here is the IncreaseCount component class:

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;

It is not throwing any errors but is not changing the value of either the Increase count or the Display count properties. I was expecting both to be changing in lockstep. My goal is to send the incremented value back to Display to be displayed. Is there a problem with the way I've written and passed my increment function?

Answer 1

You need to use this.props.count within the IncreaseCount

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

A full example might look something like this:

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>;
  }
}

Note that you don't have to pass the counter value to each Operation and use a functional setState :

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

Answer 2

Using a single component like <Operation /> is certainly how I'd do it. However, per the requirements of the OP, I'm adding this example that uses all 4 components specified.

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;

This version also prevents the counter from going below 0.