Javascript 如何在同一页中使用多个this.state计数器来增加单独的变量

我想创建三组+/-按钮，增加和减少三个单独的进度条。使用此.state，我可以增加一个计数器，但所有计数器都会同时更改

下面前面的解决方案试图解释答案，但我不能使用它，因为我没有使用

元素。

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
导入{折叠，导航栏，导航栏，导航栏，导航栏，
导航项、导航链接、容器、行、列、巨型按钮、，
来自“reactstrap”的ButtonToolbar}；
从'react sweet Progress'导入{Progress}；
导入“react sweet progress/lib/style.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={countera:0}
this.addFive=this.addFive.bind（this）
this.subFive=this.subFive.bind（this）
}
加五（x）{
this.setState（prevState=>({
x:prevState.x+5}）；
}
亚五（x）{
this.setState（prevState=>({
x:prevState.x-5}）；
}
render（）{
var alpha=this.state.countera；
varβ=30；
varγ=30；
var总和=α+β+γ；
返回(
欢迎来到菲科反应堆

开始


更正的项目
维修中的物品
剩余命中率
{alpha}项
{beta}项
{gamma}项
**+ 
- -**
按钮2
按钮3
免责声明

);
}
}
导出默认应用程序；

我希望有一个增加函数和一个减少函数，它接受一个参数，指示三个按钮变量中的哪一个应该受到影响，并且只对该变量执行该操作

---

如果只有this.state.counter a、this.state.counter b、this.state.counter c.

要递增/递减不同的计数器，只需在

addFive

和

子函数中传递计数器的名称即可


///像这样更新状态
this.state={countera:0，counterb:0，counterc:0}
///在单击函数上传递计数器的名称
地址五（姓名）{
this.setState（prevState=>({
[名称]：prevState[名称]+5
}));
}
///在单击函数上传递计数器的名称
子节（名称）{
this.setState（prevState=>({
[名称]：prevState[名称]-5
}));
}
///更新渲染函数
var alpha=this.state.countera；
varβ=this.state.counterb；
var gamma=this.state.counter c；
var总和=α+β+γ；
返回(
**this.addFive（'countera'）}>+
-this.subFive（'countera'）}>-**
**this.addFive（'counterb'）}>+
-this.subFive（'counterb'）}>-**
**this.addFive（'counterc'）}>+
-this.subFive（'counterc'）}>-**
);没有任何东西阻止你在你的状态下初始化它-计数器a、计数器B等…我刚才做了，但是我如何将要修改的状态（cA、cB等）作为参数传递给递增函数？或者我需要为每个计数器单独设置递增和递减函数？看起来你已经得到了下面的详细答案。。。你应该接受它，因为它是正确的…哇，非常感谢你这么多的工作！我不知道如何使用[括号引用]在函数中使用take参数。除了缩短函数定义之外，我还在搞清楚“（）=>”的真正含义。但是成功了@MarkWagner
（）=>
是ES6中引入的用于声明正常函数的箭头函数。
（）=>
和普通函数的区别在于
（）=>
本身没有作用域。
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;