Как использовать несколько счетчиков this.state на одной странице для увеличения отдельных переменных

Question

Я хочу создать три набора кнопок +/-, которые увеличивают и уменьшают три отдельных индикатора выполнения.С помощью this.state я могу увеличить один счетчик, но все они изменяются одновременно.

Следующее предыдущее решение пытается объяснить ответ, но я не могу его использовать, потому что я не использую

элемент. Счетчик для каждого элемента в React.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Collapse,  Navbar,    NavbarToggler,    NavbarBrand,    Nav,    
NavItem,    NavLink,    Container,    Row,  Col,  Jumbotron,  Button,  
ButtonToolbar    } from 'reactstrap';
import { Progress } from 'react-sweet-progress';
import "react-sweet-progress/lib/style.css";



class App extends React.Component {
    constructor(props) {
  super(props)

  this.state = { countera: 0}
  this.addFive = this.addFive.bind(this)
  this.subFive = this.subFive.bind(this)
}

addFive(x) {
      this.setState(prevState => ({
         x: prevState.x + 5 }));

  }

subFive(x) {
    this.setState(prevState => ({
        x: prevState.x - 5 }));
}

render() {

var alpha = this.state.countera;
var beta = 30;
var gamma = 30;
var sum = alpha + beta + gamma;

return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>Welcome to FICO Reactor</p>
      <ButtonToolbar>
        <Button tag="a"color="success" size="large" href="" 
 target="_blank">Begin</Button>
      </ButtonToolbar>
          <p>
          </p>
          <div class="grid-container">
          <div class="grid-item" color="blue">Items Corrected</div>
          <div class="grid-item">Items In Repair</div>
          <div class="grid-item">Remaining Hits</div>
          <div class="grid-item"><Progress width={200} type="circle" 
   percent={100*alpha/sum} status="success" /></div>
          <div class="grid-item"><Progress width={200} type="circle" 
  percent={100*beta/sum} status="success" /></div>
          <div class="grid-item"><Progress width={200} type="circle" 
  percent={100*gamma/sum} status="error" /></div>
          <div class="grid-item">{alpha} Items</div>
          <div class="grid-item">{beta} Items</div>
          <div class="grid-item">{gamma} Items</div>
          **<div class="grid-item"><Button onClick={this.addFive()}>+ 
  </Button> - <Button onClick={alpha}>-</Button></div>**
          <div class="grid-item">Buttons2</div>
          <div class="grid-item">Buttons3</div>
          </div>
      <p>Disclaimer</p>
    </header>
  </div>
);
 }
}

 export default App;

Я хочу иметь функцию увеличения и функцию уменьшения, которая принимает параметр, указывающий, на какую из трех кнопок-переменных следует воздействовать, и выполняетэто только к той переменной.

Если бы существовал this.state.counterA, this.state.counterB, this.state.counterC.

Answer 1

Чтобы увеличить / уменьшить другой счетчик, нам просто нужно передать имя счетчика в функции addFive и subFive.

///update the state like this
this.state = { countera: 0, counterb: 0, counterc: 0 }

///pass the name of the counter on the click function
addFive(name) {
   this.setState(prevState => ({
       [name]: prevState[name] + 5
   }));

}

///pass the name of the counter on the click function
subFive(name) {
   this.setState(prevState => ({
       [name]: prevState[name] - 5
   }));
}
    
    
///update the render function

    var alpha = this.state.countera;
        var beta = this.state.counterb;
        var gamma = this.state.counterc;
        var sum = alpha + beta + gamma;

        return (
            <div className="App">
                <header className="App-header">
                    <div class="grid-container">
                        <div class="grid-item"><Progress width={200} type="circle"
                            percent={100 * alpha / sum} status="success" /></div>
                        <div class="grid-item"><Progress width={200} type="circle"
                            percent={100 * beta / sum} status="success" /></div>
                        <div class="grid-item"><Progress width={200} type="circle"
                            percent={100 * gamma / sum} status="error" /></div>
                        **<div class="grid-item"><Button onClick={() => this.addFive('countera')}>+
  </Button> - <Button onClick={() => this.subFive('countera')}>-</Button></div>**

  **<div class="grid-item"><Button onClick={() => this.addFive('counterb')}>+
  </Button> - <Button onClick={() => this.subFive('counterb')}>-</Button></div>**

  **<div class="grid-item"><Button onClick={() => this.addFive('counterc')}>+
  </Button> - <Button onClick={() => this.subFive('counterc')}>-</Button></div>**
                    </div>
                </header>
            </div>
        );

Если вы хотите упростить функцию изменения состояния, создайте одну функцию и передайте имя и значение (приращение / уменьшение), как показано ниже:

changeFive(name, value) {
   this.setState(prevState => ({
       [name]: prevState[name] + value
   }));

}


<div class="grid-item"><Button onClick={() => this.changeFive('countera', 5)}>+
  </Button> - <Button onClick={() => this.changeFive('countera', -5)}>-</Button></div>

Надеюсь, это поможет:)