Reactjs 使用动态键值对切换状态

我一直在尝试使用动态键值对切换状态，但似乎没有发生

以下是国家：

constructor(props) {
  super(props);
  this.state = {
    firecrackerAnimation: false,
    mainImageBounceAnimation: false,
    flowersFallingAnimation: false,
  };
}

这是我用来切换状态的代码

changeAnimation = e => {
   this.setState(
    {
      [e.target.value]: !(this.state[event.target.value]),
    },
    () => {
      console.log(this.state);
    }
);

下面是我在render（）中使用它的地方

动画
{" "}
鞭炮动画

{" "}
主图像反弹

{" "}
落花动画

更改

更改动画

功能如下：

changeAnimation(e){
      var value = e.target.value;
      this.setState({[value]: !(this.state[value])});    
}

---

您的更改动画事件有问题

changeAnimation=e=>{
这是我的国家(
{
//[e.target.value]：！（this.state[event.target.value]），
//在这里，你必须像这样改变
this.state[e.target.value]：！（this.state[event.target.value]），
},
() => {
console.log（this.state）；
}
)；

我已经指出了几个错误：

• 您应该使用

  e.target.name

  来获取正在单击的

  复选框的名称

• 必须为复选框提供

  名称

  ，而不是

  值

工作演示

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
爆竹动画：错，
mainImageBounceAnimation:false，
花卉装饰：假，
};
}
changeAnimation=（e）=>{
这是我的国家(
{
[e.target.name]：！（this.state[e.target.name]），
},
() => {
console.log（this.state）；
})
}
render（）{
返回(
动画
{" "}
鞭炮动画

{" "}
主图像反弹

{" "}
落花动画

)
}
}
ReactDOM.render（，document.getElementById（'root'）；

。作为控制台包装{最大高度：50%！重要；}

---

其他响应是正确的，因为您可以使用动态键和变量设置state，但是React建议不要在setState中使用state

从文档中： React可以将多个setState（）调用批处理到单个更新中以提高性能。因为this.props和this.state可以异步更新，所以您不应该依赖它们的值来计算下一个状态 -

您可以采用与其他注释相同的想法，让setState接受一个函数。我在代码中使用了它（按钮是在外部函数中定义的）

---

控制台有错误吗？我想你有输入错误，应该是

这个.state[e.target.value]

不是

事件.target.value

。

changeAnimation(e){
      var value = e.target.value;
      this.setState({[value]: !(this.state[value])});    
}

this.setState((prevState) => ({
    [button]: !prevState[button]
  }));