[英]How to add a CSS class to an element on click - React
如何在单击时将CSS类添加到现有REACT元素?
我创建了一个JSFiddle: https ://jsfiddle.net/5r25psub/
在小提琴中,仅当我有以下语句时,代码才起作用: this.setState({color:blue});
我想要这样的东西: this.setState({className: 'green'});
我究竟做错了什么?
码:
<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>
您可以使用在此处找到的模块classnames
:
https://www.npmjs.com/package/classnames
因此,您将执行以下操作:
getClassNames() {
return classNames({
'blue': this.state.clicked,
'green': !this.state.clicked
});
},
render () {
return <button className={this.getClassNames()} onClick={this.setState({clicked: !this.state.clicked})>
}
您需要将所有状态参数添加到getInitialState
,现在唯一拥有的是color
,因此this.state.color
是唯一的存在
当您将状态设置为className时,那是其中唯一的东西,甚至颜色也消失了,这就是为什么初始颜色为普通淡淡的灰色
您在setState中也有语法错误,不是
this.setState({className = " green"});
它应该是:
this.setState({className: " green"});
最后, React.render
已被弃用,你需要使用ReactDOM.render
现在
https://jsfiddle.net/ajvf50s6/3/
最有可能的是,您最好基于className
而不是基于color
state属性进行验证:
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'});
}
}
并且,对于className,考虑一个变量:
let colorClass= this.state.color === "blue" ? "blue" : "green"
现在,如下所示替换className,您需要将该对象封装在调用div class的位置。
return <button className={colorClass} onClick={this.handleClick}>My background is: {this.state.color}, Click me to change</button>;
我希望它能正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.