單擊時如何向元素添加CSS類-React
[英]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>
4 個解決方案
解決方案1
4 2016-03-30 19:43:49
您可以使用在此處找到的模塊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})>
}
解決方案2
1 2016-03-30 19:31:31
您需要將所有狀態參數添加到getInitialState ，現在唯一擁有的是color ，因此this.state.color是唯一的存在
當您將狀態設置為className時，那是其中唯一的東西，甚至顏色也消失了，這就是為什么初始顏色為普通淡淡的灰色
您在setState中也有語法錯誤，不是
this.setState({className = " green"});
它應該是：
this.setState({className: " green"});
最后， React.render已被棄用，你需要使用ReactDOM.render現在
解決方案3
0 2016-03-30 19:44:11
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"}是錯誤的分配。
解決方案4
0 2018-09-14 06:49:32
您可以這樣做，而不是使用兩個狀態變量。
由於顏色的初始狀態是藍色，因此可以將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>;
我希望它能正常工作。
如何通過單擊 React 僅將活動 class 添加到下一個元素？
[英]How to add active class only to the next element by click in React?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.