四个按钮使用一个功能

Question

我正在用 React 写这个。

现在我有 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>

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

Answer 1

看看这个：

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

诀窍是使用 .bind(( 创建一个新版本的 handleUpdateCounter，其中一些参数是"固定的"。

几点注意事项：

{
 [myVar]: "test"
}

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

我们使用this.setState(callback(来确保我们读取计数器的先前值，因为setState是异步的。