单击时如何向元素添加CSS类-React
[英]How to add a CSS class to an element on click - React
问题描述
How do you add a CSS class to an existing REACT element on click? 
如何在单击时将CSS类添加到现有REACT元素？
I have a JSFiddle created: https://jsfiddle.net/5r25psub/ 我创建了一个JSFiddle： https ://jsfiddle.net/5r25psub/
In the fiddle, the code only works if I have the statement: this.setState({color:blue}); 在小提琴中，仅当我有以下语句时，代码才起作用： this.setState({color:blue});
I want something like this.setState({className: 'green'}); 我想要这样的东西： this.setState({className: 'green'}); What am I doing wrong? 我究竟做错了什么？
Code: 码：
<html>
<script>
var Hello = React.createClass({
getInitialState: function(){
return {
color: 'blue'
};
},
handleClick: function(){
if (this.state.color === 'blue'){
this.setState({className = " green"});
} else {
this.setState({color: 'blue'});
}
},
render: function() {
return <button className={this.state.className} onClick={this.handleClick}>My background is: {this.state.color}, Click me to change</button>;
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
</script>
<body>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<style>
.green {
background-color: lightgreen;
}
.blue {
background-color: lightblue;
}
</style>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
</body>
</html>
4 个解决方案
解决方案1
4 2016-03-30 19:43:49
You can use the module classnames found here: 您可以使用在此处找到的模块classnames ：
https://www.npmjs.com/package/classnames https://www.npmjs.com/package/classnames
So you would do something like: 因此，您将执行以下操作：
getClassNames() {
return classNames({
'blue': this.state.clicked,
'green': !this.state.clicked
});
},
render () {
return <button className={this.getClassNames()} onClick={this.setState({clicked: !this.state.clicked})>
}
解决方案2
1 2016-03-30 19:31:31
You need to add all state parameters to getInitialState , right now the only thing you have is color , so this.state.color is the only thing in there 您需要将所有状态参数添加到getInitialState ，现在唯一拥有的是color ，因此this.state.color是唯一的存在
When you set your state to className: something, that is the only thing in there now, even color is gone...and that is why the initial color is the normal bland gray 当您将状态设置为className时，那是其中唯一的东西，甚至颜色也消失了，这就是为什么初始颜色为普通淡淡的灰色
you have a syntax error in setState as well, its not 您在setState中也有语法错误，不是
this.setState({className = " green"});
It should be: 它应该是：
this.setState({className: " green"});
Finally, React.render is deprecated, you need to use ReactDOM.render now 最后， React.render已被弃用，你需要使用ReactDOM.render现在
Fiddle: https://jsfiddle.net/omarjmh/69z2wepo/36597/ 小提琴： https : //jsfiddle.net/omarjmh/69z2wepo/36597/
解决方案3
0 2016-03-30 19:44:11
https://jsfiddle.net/ajvf50s6/3/ https://jsfiddle.net/ajvf50s6/3/
Most probably, you should better do a verification based on the className , not on the color state property: 最有可能的是，您最好基于className而不是基于color state属性进行验证：
handleClick: function(){
if (this.state.className === 'blue'){
this.setState({className: "green"});
} else {
this.setState({className: "blue"});
}
}
Also, as @Omarjmh mentioned, you have a typo in your code. 另外，如@Omarjmh所述，您的代码中有一个错字。 {className = " green"} is wrong assignment. {className = " green"}是错误的分配。
解决方案4
0 2018-09-14 06:49:32
Rather than using two state variables, you can do like this. 您可以这样做，而不是使用两个状态变量。
Since the initial state of color is blue, you can change the handleClick function as : 由于颜色的初始状态是蓝色，因此可以将handleClick函数更改为：
handleClick: function(){
if (this.state.color === 'blue'){
this.setState({color : "green"});
} else {
this.setState({color: 'blue'});
}
}
And, for the className, consider a variable : 并且，对于className，考虑一个变量：
let colorClass= this.state.color === "blue" ? "blue" : "green"
Now, replace the className as below and you need to enclose that object where you call div class. 现在，如下所示替换className，您需要将该对象封装在调用div class的位置。
return <button className={colorClass} onClick={this.handleClick}>My background is: {this.state.color}, Click me to change</button>;
I hope it works fine. 我希望它能正常工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.