Question

这应该很简单，但是我不知道该怎么做。

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

现在，当我单击其中一个按钮时，两个计数器都会更改。我如何才能使其仅被单击的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>

Answer 2

如果按钮是动态的，则可以将状态设置为数组并更新相关索引

None

Answer 3

您应该定义两个状态，并在按下每个按钮时更新当前状态，然后可以像这样在圆顶中呈现当前状态

state = {
  firstCount: 0,
  secondCount: 0
}

并编写您的操作（函数）以处理这种更新状态

handleUpdateCount = stateName => {
  this.setState({
    [stateName]= this.state[stateName] + 1
  })
}

然后您应该像这样=>

调用此函数

this.handleUpdateCount('firstCount')

React点击计数器：仅更新一个元素的状态

3 个答案: