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

【问题标题】：How to add a CSS class to an element on click - React如何在单击时向元素添加 CSS 类 - React
【发布时间】：2016-07-18 23:51:06
【问题描述】：

如何在点击时将 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>

【问题讨论】：

在handleClick 里面你写了className = " green" 但它应该是className: "green"

标签： javascript html css reactjs

【解决方案1】：

您可以使用此处的模块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】：

您需要将所有状态参数添加到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/

【讨论】：

我对如何检索 classList 有点困惑。 element.getClassList() 在 React 中有效吗？或者有其他方法吗？
为什么需要班级列表？看看我发布的小提琴中的代码，你的外部资源不正确，打开控制台看看它说了什么，这就是我回答你问题的全部内容

【解决方案3】：

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"} 分配错误。

【讨论】：

完美！这绝对有帮助。我有一个后续问题 - 如何将 css 类添加到已经有类的现有元素。例如，一个元素
，我想向它添加类 center_align ，这样它现在看起来：

这可能吗?
另外，这是一个单一元素。是否有必要为多个元素保留状态？

【解决方案4】：

您可以这样做，而不是使用两个状态变量。

由于颜色的初始状态是蓝色，你可以把handleClick函数改成：

handleClick: function(){
 if (this.state.color === 'blue'){
  this.setState({color : "green"});
 } else {
   this.setState({color: 'blue'});
 }
}

对于类名，考虑一个变量：

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

我希望它工作正常。

【讨论】：