React Click Counter：仅更新一个元素的状态

Question

这应该很简单，但我不知道如何去做。

我有一个带有多个按钮的组件，每个按钮都有一个“计数”值，设置为状态。当用户点击时，计数会增加。

现在，当我单击其中一个按钮时，两个计数器都会更改。我怎样才能让它只更新被点击的 div，使用相同的状态？

编辑：我不想有不同的计数，因为我希望这个组件动态呈现按钮。如果我一开始不知道有多少个按钮怎么办？

class Block extends React.Component {
  state = {
    count: 0
  };

  handleClick = e => {
    const count = this.state.count;
    this.setState({ count: count + 1 });
  };

  render() {
    return (
      <div>
        <button className="block" onClick={this.handleClick}>
          <div className="counter">{this.state.count}</div>
        </button>
        <button className="block" onClick={this.handleClick}>
          <div className="counter">{this.state.count}</div>
        </button>
      </div>
    );
  }
}

Answer 1

这更像是一个学习如何在反应中思考的问题。

如果您需要能够重用诸如计数器之类的功能，您可以使其成为自己的组件并让它管理自己的状态。然后您可以在任何需要的地方重复使用它。

下面是一个例子：

class Counter extends React.Component {
  state = {
    count: 0
  };

  handleClick = () => {
    // Use updater function when new state is derived from old
    this.setState(prev => ({ count: prev.count + 1 }));
  };

  render() {
    return (
      <button className="block" onClick={this.handleClick}>
        <div className="counter">{this.state.count}</div>
      </button>
    );
  }
}

// Now you can use it dynamically like this:
class Block extends React.Component {
  render() {
    return (
      <div>
        <div>There are 4 counter component instances that each manage their own state.</div>
        {[1,2,3,4].map(v => <Counter />)}
      </div>
    );
  }
}

ReactDOM.render(<Block />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>