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（）创建带有某些参数“ fixed”的handleUpdateCounter的新版本。

一些注意事项：

{
 [myVar]: "test"
}

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

由于setState是异步的，因此我们使用this.setState（callback）来确保读取计数器的先前值。

四个按钮使用一个功能？

1 个答案: