如何在单击时向元素添加 CSS 类 - React

IT技术 javascript html css reactjs
2021-05-10 10:55:19

如何在单击时将 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个回答

您可以使用classnames此处找到的module：

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现在

小提琴：https : //jsfiddle.net/omarjmh/69z2wepo/36597/

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

最有可能的是，您最好根据className而非colorstate 属性进行验证：

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>;

我希望它工作正常。

其它你可能感兴趣的问题
上一篇组装式3D打印机多吗？ 下一篇提高打印螺旋桨的耐用性