Reactjs 四个按钮使用一个功能？

我写这篇文章是为了回应

现在我有2组数字，由4个按钮控制；2个递增按钮和2个递减按钮。递增按钮升高每个数字，递减按钮降低每个数字

我为其中一个减量按钮创建了一个函数。但我不知道如何根据单击的按钮使其动态化。我不想要4个独立的函数，我更喜欢2个函数，甚至只有1个

这就是功能：

decrementClick() {
        if (this.state.breakLength > 1) {
          this.setState({ breakLength: this.state.breakLength - 1 })
        }  
    }

这是JSX代码：

<button id="break-decrement" onClick={this.decrementClick.bind(this.decrementClick)}>▼</button>

▼

我可以将一个值从按钮传递到函数中，但它如何修改正确的状态？

请检查：

class MyComponent extends React.Component {
  state = {
    foo: 0,
    bar: 0
  }

  handleUpdateCounter(counterId, operation, event) {
    this.setState(prevState => ({
      [counterId]: operation === 'increment' ? prevState[counterId] + 1 : prevState[counterId] - 1
    }));

  }

  render() {
    const { foo, bar } = this.state

    return (
      <div>
          Foo: {foo}, Bar: {bar}
          <button onClick={this.handleUpdateCounter.bind(this, 'foo', 'increment')}>I increment foo</button>

          <button onClick={this.handleUpdateCounter.bind(this, 'bar', 'decrement')}>I decrement bar</button>

      </div>
    )
  }

}

使用myVar中存储的键名作为字符串，在对象中设置动态键的方式

---

我们使用这个.setState（回调）来确保读取计数器的前一个值，因为setState是异步的

太棒了，谢谢你！这完全回答了我的问题。有没有办法在setState之外访问this.state.foo的值？我想用if语句检查数字是否在一定范围内。@AdamWeiler没问题。在组件的任何方法中，您都可以通过执行

this.state.foo

来访问当前状态。我的意思是，handleUpdateCounter（）现在同时使用foo和bar。有没有一种方法可以动态地编写一个if语句，该语句可以用于foo或bar？示例：if（[counterId]>1）--或者：if（this.state.[counterId]>1）@AdamWeiler我想您可能只需要使用this.state[counterId]（或者我的示例中的prevState[counterId]）。使用myObj[myKeyVar]动态访问对象中的密钥。没问题，很好。

{
 [myVar]: "test"
}