Reactjs 反应：为什么元素样式不与setState切换？

这只是一个简单的切换机制：

元素的Onclick是通过响应状态更改来切换边框颜色更改。它会改变颜色一次！但不会切换回原始颜色

（我已经尝试了很多不同的功能，读取/重新读取状态上的React文档，设置状态的异步/批量更改功能，并且一次又一次地进行了梳理。）

有人能帮我找到解决办法吗

提前谢谢

import React, { Component } from 'react';

class Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false,
    }
    this.updateActive = this.updateActive.bind(this);
  }



 updateActive(){
    this.setState(function(){
      this.state.active = !this.state.active;
      { return this.state.active; }
    });
  }

  render(){
    return (
      <div className="seq_btn" onClick={this.updateActive} style={ {borderColor: this.state.active ? 'black' : 'rgb(193, 255, 112)' }}></div>
    )
  }
}

export default Button;

import React，{Component}来自'React'；
类按钮扩展组件{
建造师（道具）{
超级（道具）；
此.state={
活动：错误，
}
this.updateActive=this.updateActive.bind（this）；
}
updateActive（）{
this.setState（函数（）{
this.state.active=！this.state.active；
{返回this.state.active；}
});
}
render（）{
返回(
)
}
}
导出默认按钮；

因为返回语法不正确：

this.setState(function(){
  this.state.active = !this.state.active;
  { return this.state.active; }
});

这应该是：

this.setState(function(){
  return { active: !this.state.active };
});

但是，您根本不需要在这里使用回调。您应该只使用新数据设置状态

this.setState({ active: !this.state.active });

---

作为一个好习惯，您永远不应该以任何形式对状态进行不直接使用setState执行的变异

甚至使用

this.state.active = !this.state.active

是不好的形式，很可能是你的问题

相反，考虑

this.setState({ active: !this.state.active });

还要了解，setState可以批处理以供以后处理，它们并不总是立即执行

setState（）并不总是立即更新组件。它可以批处理更新或将更新推迟到以后

如下文所述，功能组件将用于相同的目的，而不需要生命周期方法的开销

import React from "react";

const Button = ({ active, clickAction }) => (
    <div onClick={clickAction} className={{ borderColor: active ? "green": "purple"}}>
</div>);

export default Button;

从“React”导入React；
常量按钮=（{active，clickAction}）=>(
);
导出默认按钮；

下面的两个答案都是正确的，不要忘记将其中一个标记为答案。谢谢，安迪！同样，为什么键

active

不需要

this.state

？传递给

setState

的对象会合并到当前组件的状态中。你应该只传递状态更新。谢谢，Joshua！是的，我读了关于异步/批处理状态更改的文档。所以，我知道这是实现我想要实现的目标的一种危险的方式。还有什么选择？像这样更改按钮的状态没有错，但是如果此组件的父级包含受此“单击”影响的其他状态，则我建议通过道具向下传递此按钮的样式。如果可以通过功能组件而不需要lifecycle methodsAh的开销来实现按钮扩展反应组件，那么很少有好的理由让组件只呈现按钮扩展反应组件。这正是将要发生的事情。作为一个道具，我该如何处理传球风格<代码>，然后按钮组件内的一些样式切换功能？请参阅我的答案底部，了解如何通过道具传递数据。我对它进行了编辑，以包含一个功能按钮组件。虽然我使用了您最初使用的“活动”道具，但您可以将其替换为颜色，并根据传递的内容设置边框颜色。