如何在点击React时将CSS类添加到元素中

How to add a CSS class to an element on click - React

本文关键字：添加 元素 CSS 时将 React      更新时间：2023-09-26

如何在单击时将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:something时，这是现在唯一的东西，甚至颜色都消失了。。。这就是为什么初始颜色是正常的淡灰色

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

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

应该是：

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

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

Fiddle：https://jsfiddle.net/omarjmh/69z2wepo/36597/

https://jsfiddle.net/ajvf50s6/3/

很可能，您应该更好地基于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'});
 }
}

对于className，考虑一个变量：

let colorClass= this.state.color === "blue" ? "blue" : "green"

现在，将className替换为如下所示，您需要将调用div类的对象括起来。

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

我希望它能正常工作。

相关文章：