使用React添加和移除CSS类

我是React的新手。我有一个按钮组中的几个按钮：使用React添加和移除CSS类

 <div className="btn-group"> 
     <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type1")} >Button1</button> 
     <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type2")} >Button2</button> 
     <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type3")} >Button3</button> 
     </div>

每当按钮中的一个用户点击，这个按钮应该成为积极的，选择一个。我发现我需要添加CSS类active到相应的按钮，但我不知道如何实现这一点。

我想到了这一点。我有一个changeDataType函数连接到我的按钮，在其中我做了一些其他的东西。那么我会在那里以某种方式操纵CSS吗？

所以我想我的问题是第一，如何定位的按钮，我需要为目标，并秒，我怎么可能改变该按钮的CSS与反应。

来源

2017-05-04 George Welder

在状态改变时反应重新呈现。在你的情况下，如果你想改变看起来的方式，那么你可能想强制另一个渲染。你可以做的是让className成为状态的一部分，然后在需要时更新状态，导致组件使用新的className重新渲染。例如：

constructor() { 
    super(); 
    this.state = { 
     className: 'btn' 
    } 
} 

render() { 
    return (
     <Button className={this.state.className}>Click me</Button> 
    ) 
}

由于className势必状态更新状态会导致按钮与新className再次渲染。这是可以做到这样的：

updateClass() { 
    let className = this.state.className; 
    className = className + ' ' + 'btn-primary' 
    this.setState({className}) 
}

这是你可以在点击按钮调用和更新className按钮的功能的一个例子。

来源

2017-05-04 15:55:09

非常感谢，这对我很有意义。所以在我的情况下，我只是将'active'添加到我的className中，存储在状态中。但是，我将如何从不再想要成为主动元素的元素中再次删除它？ –

想到的第一种方法是检查当前点击的按钮的类名，并做出相应的响应。 –

有一个很好的工具，你可以使用类名逻辑+加盟的类别名称上的设置作出反应状态活跃，你可以做类似下面一起来

https://github.com/JedWatson/classnames

为主。您可以根据需要使用逻辑来尽可能复杂。如果逻辑结果是虚假的，那么该键不会包含在输出中。

var classNames = require('classnames'); 

var Button = React.createClass({ 
    // ... 
    render() { 
    var btnClass = classNames({ 
     btn: true, 
    'btn-active': this.state.isActive 
    }); 
    return <button className={btnClass}>{this.props.label}</button>; 
    } 
});

来源

2017-05-04 16:40:08

在这里使用第三方库对于这么小的东西似乎是过分的。 – lux

计算类名在组件中是很常见的事情，'classnames'具有简单的功能，我觉得这很合理。对于一个孤立的例子来说，看起来似乎有些过分，但是你会在项目中多次使用'classnames'包。 –

使用React添加和移除CSS类

回答

相关问题