Javascript 反应单击计数器：仅更新一个元素的状态

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

我有一个有多个按钮的组件，每个按钮都有一个“计数”值，设置为state。当用户单击时，计数会上升

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

类块扩展React.Component{
状态={
计数：0
};
handleClick=e=>{
const count=this.state.count；
this.setState（{count:count+1}）；
};
render（）{
返回(
{this.state.count}
{this.state.count}
);
}
}

这更多的是学习如何在反应中思考的问题

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

下面是一个例子：

类计数器扩展React.Component{
状态={
计数：0
};
handleClick=（）=>{
//从旧状态派生新状态时使用更新程序函数
this.setState（prev=>（{count:prev.count+1}））；
};
render（）{
返回(
{this.state.count}
);
}
}
//现在，您可以这样动态地使用它：
类块扩展了React.Component{
render（）{
返回(
有4个计数器组件实例，每个实例管理自己的状态。
{[1,2,3,4].map（v=>）}
);
}
}
ReactDOM.render（，document.getElementById（'root'））
这更多的是学习如何在反应中思考的问题

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

下面是一个例子：


类计数器扩展React.Component{
状态={
计数：0
};
handleClick=（）=>{
//从旧状态派生新状态时使用更新程序函数
this.setState（prev=>（{count:prev.count+1}））；
};
render（）{
返回(
{this.state.count}
);
}
}
//现在，您可以这样动态地使用它：
类块扩展了React.Component{
render（）{
返回(
有4个计数器组件实例，每个实例管理自己的状态。
{[1,2,3,4].map（v=>）}
);
}
}
ReactDOM.render（，document.getElementById（'root'））
您应该定义两种状态，当按下每个按钮时更新当前状态，您可以在穹顶中呈现如下状态

state = {
  firstCount: 0,
  secondCount: 0
}

并编写您的操作（函数）来处理如下更新状态

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

那么你应该像这样调用这个函数=>

this.handleUpdateCount('firstCount')

您应该定义两种状态，当按下每个按钮时更新当前状态，您可以像这样在圆顶中渲染当前状态

state = {
  firstCount: 0,
  secondCount: 0
}

并编写您的操作（函数）来处理如下更新状态

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

那么你应该像这样调用这个函数=>

this.handleUpdateCount('firstCount')

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

class Block extends React.Component {
  state = [];

  handleClick = index => {
    this.setState(state => {
       const newState = [...state]; //keep state immutable
       !newState[index] && (newState[index] = 0)
       newState[index]++

       return newState
    });
  };

  render() {
    return (
      <div>
        {[1,2,3].map((value, index) => <button className="block" onClick={() => this.handleClick(index)}>
          <div className="counter">{this.state[index]}</div>
        </button>)}
      </div>
    );
  }
}

类块扩展React.Component{
州=[]；
handleClick=索引=>{
this.setState（state=>{
const newState=[…state]；//保持状态不变
！newState[index]&（newState[index]=0）
新闻状态[索引]++
返回新闻状态
});
};
render（）{
返回(
{[1,2,3].map（（值，索引）=>this.handleClick（索引）}>
{this.state[索引]}
)}
);
}
}
如果按钮是动态的，则可以将状态设置为数组并更新相关索引

class Block extends React.Component {
  state = [];

  handleClick = index => {
    this.setState(state => {
       const newState = [...state]; //keep state immutable
       !newState[index] && (newState[index] = 0)
       newState[index]++

       return newState
    });
  };

  render() {
    return (
      <div>
        {[1,2,3].map((value, index) => <button className="block" onClick={() => this.handleClick(index)}>
          <div className="counter">{this.state[index]}</div>
        </button>)}
      </div>
    );
  }
}

类块扩展React.Component{
州=[]；
handleClick=索引=>{
this.setState（state=>{
const newState=[…state]；//保持状态不变
！newState[index]&（newState[index]=0）
新闻状态[索引]++
返回新闻状态
});
};
render（）{
返回(
{[1,2,3].map（（值，索引）=>this.handleClick（索引）}>
{this.state[索引]}
)}
);
}
}
为什么你认为只有一个会改变？你需要在该组件中有两个单独的计数，或者两个组件各自有自己的计数。好吧，这就是我试图避免的。。。因为如果我的按钮是动态的，而我不知道从一开始我会有多少按钮@jonrsharpeHave状态是否为数组，并通过索引对其进行寻址？或者，再一次，让每个人管理自己的状态。为什么你认为只有一个人会改变？你需要在该组件中有两个单独的计数，或者两个组件各自有自己的计数。好吧，这就是我试图避免的。。。因为如果我的按钮是动态的，而我不知道从一开始我会有多少按钮@jonrsharpeHave状态是否为数组，并通过索引对其进行寻址？或者，再次让每个人管理自己的状态。一次更正…[stateName]=此。状态[stateName]+1应为[stateName]：此。状态[stateName]+1更改为：一次更正…[stateName]=此。状态[stateName]+1应为[stateName]：此。状态[stateName]+1更改为：