Javascript 如何在单击时向元素添加CSS类-反应

如何在单击时将CSS类添加到现有的REACT元素

我创建了一个JSFIDLE：

在fiddle中，只有当我有以下语句时，代码才会工作：

this.setState（{color:blue}）

我想要类似于
this.setState（{className:'green'}）的东西
我做错了什么

代码：


var Hello=React.createClass({
getInitialState:函数（）{
返回{
颜色：“蓝色”
};
},
handleClick:function（）{
如果（this.state.color==='blue'）{
this.setState（{className=“green”}）；
}否则{
this.setState（{color:'blue'}）；
}
},
render:function（）{
返回我的背景是：{this.state.color}，单击我进行更改；
}
});
React.render（，document.getElementById（'container'）；
格林先生{
背景颜色：浅绿色；
}
蓝先生{
背景颜色：浅蓝色；
}
您需要将所有状态参数添加到
getInitialState
，现在您唯一拥有的是
color
，因此
this.state.color
是其中唯一的内容

当您将状态设置为className:something时，这是其中唯一的内容，甚至颜色都消失了…这就是为什么初始颜色是正常的淡灰色

setState中也有语法错误，但不是

this.setState({className = " green"});

应该是：

this.setState({className: " green"});

最后，
React.render
已被弃用，现在需要使用
ReactDOM.render

Fiddle:
您可以使用以下模块
类名：


所以你可以这样做：

getClassNames() {
    return classNames({
        'blue':  this.state.clicked,
        'green':  !this.state.clicked
    });
},
render () {
    return <button className={this.getClassNames()} onClick={this.setState({clicked: !this.state.clicked})>
}

getClassNames（）{
返回类名({
“蓝色”：this.state.clicked，
“绿色”：！this.state.clicked
});
},
渲染（）{
返回
}

最有可能的情况是，您最好基于
className
进行验证，而不是基于
color
状态属性：

handleClick: function(){
    if (this.state.className === 'blue'){
        this.setState({className: "green"});
    } else {
        this.setState({className: "blue"});
    }
}

另外，正如@Omarjmh所提到的，您的代码中有一个输入错误<代码>{className=“green”}
分配错误
 您可以这样做，而不是使用两个状态变量

由于颜色的初始状态为蓝色，因此可以将handleClick函数更改为：

handleClick: function(){
 if (this.state.color === 'blue'){
  this.setState({color : "green"});
 } else {
   this.setState({color: 'blue'});
 }
}

，对于类名，考虑变量：
let colorClass= this.state.color === "blue" ? "blue" : "green" 

现在，替换下面的类名，您需要将该对象括在调用div类的位置

return <button className={colorClass} onClick={this.handleClick}>My background is: {this.state.color}, Click me to change</button>;

返回我的背景是：{this.state.color}，点击我进行更改；

我希望它能正常工作。
对于如何检索类列表，我有点困惑。element.getClassList（）在React中工作吗？或者有其他的方法吗？为什么你需要一个班级列表？看一看我贴的小提琴上的代码，你有不正确的外部资源，打开控制台，看看上面写着什么，这就是我回答你的问题所需要的全部——很好，我不知道，总是在我自己身上编码，但我还是会的。棒极了！这绝对有帮助。我有一个后续问题-如何将css类添加到已经有类的现有元素中。例如，一个元素，我想添加类中心对齐到它，这样它现在看起来：这是可能的吗？同样，这是单个元素的一个。是否有必要保留多个元素的状态？在
handleClick
中，您编写了
className=“green”
，但它应该是
className:“green”
return <button className={colorClass} onClick={this.handleClick}>My background is: {this.state.color}, Click me to change</button>;