使用 React 添加和删除 CSS 类

Posted 2023-02-21

【中文标题】使用 React 添加和删除 CSS 类

【英文标题】：Add & Remove CSS classes with React

【发布时间】：2017-10-02 21:47:06

【问题描述】：

我是 React 新手。我在一个按钮组中有几个按钮：

<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 吗？

所以我想我的问题是first，如何定位我需要定位的按钮，以及second，如何使用 React 更改该按钮的 CSS。 p>

【参考方案1】：

我是怎么做到的：

//ChatRoomPage 组件

function ChatRoomPage() 

 const [showActionDropdown, setShowActionDropdown] = useState('hide');

  function showActionDropdownHandler()
    console.log("clicked")
    if(showActionDropdown=='hide')
      setShowActionDropdown('show')
    else
      setShowActionDropdown('hide')

  


 return (

    <div>

           <button onClick= () => showActionDropdownHandler()  className="btn " type="button">Actions</button>

        <div className=`action_menu $showActionDropdown`>
          ...
        </div>

   </div>
 );


export default ChatRoomPage;

【参考方案2】：

有一个不错的实用程序可以用于类名逻辑 + 将类名连接在一起

https://github.com/JedWatson/classnames

基于将 React 状态设置为 active，您可以执行以下操作。您可以使用逻辑变得尽可能复杂。如果逻辑结果为假，则该键不会包含在输出中。

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

【讨论】：

在这里使用第三方库对于这么小的事情似乎有点过分了。

计算类名在组件中是很常见的事情，classnames 的功能很简单，我觉得这很合理。对于一个孤立的例子来说，这似乎有点矫枉过正，但您会在一个项目中多次使用 classnames 包。

这里有更多解决方案***.com/questions/34521797/…

【参考方案3】：

在状态变化时反应重新渲染。在您的情况下，如果您想改变某些东西的外观，那么您可能想要强制另一个渲染。您可以做的是让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 的函数示例。

【讨论】：

非常感谢，这对我来说很有意义。所以在我的情况下，我只需将active 添加到我的类名中，存储在状态中。但是，如何从我不再希望成为活动元素的元素中再次删除它？

首先想到的方法是检查当前单击按钮的类名并做出相应响应。