如何使用 React 在点击时动态添加和删除类？答案

【问题标题】：How to dynamically add and remove class on click with React?如何使用 React 在点击时动态添加和删除类？
【发布时间】：2019-07-19 01:18:28
【问题描述】：

我有一个链接列表。

我正在添加一个点击类，称为“is-active”。同时，我想删除所有现有的“活动”，除了我点击的链接。可能只有一个元素具有“活动”类，因为它将“活动”页面。（使用bulma css）

这是我迄今为止尝试过的代码。它是在添加类而不是删除它们。

class Menu extends Component {

    constructor(props) {
        super(props);
        this.state = {addClass: false}
    };

    handleClick(e) {
        if(e.target.class === 'is-active'){
            e.target.className = '';
            console.log('remove')
        }else{
            e.target.className = 'is-active';
            console.log('add class')
        }
    }  

    render() {
        <ul className="menu-list">
            { this.props.getList.map(list =>
                <Link onClick={this.handleClick.bind(this)} key={list.id} to="">{list.title}</Link>                    
            )}
        </ul>
    }

}

export default SideMenu;

非常感谢您的建议。

【问题讨论】：

标签： javascript reactjs button classname

【解决方案1】：

你必须避免自己接触 DOM，让 React 为你做。

您希望将信号保持在告诉您列表中的元素是否处于活动状态的状态，并在渲染阶段使用该信号设置类：

state = {
  activeId: null  // nothing selected by default, but this is up to you...
}

handleClick(event, id) {
  this.setState({ activeId: id })
}

render() {
  <ul className="menu-list">
  {
    this.props.getList.map(list =>
      <Link key={ list.id }
            className={ this.state.activeId === list.id && 'is-active' }
            onClick={ this.handleClick.bind(this, list.id) } 
            to="">
        { list.title }
      </Link>                    
    )
  }
  </ul>
}

这样，在每个 render 处，getList 属性中每个项目的 id 都会与您保持在状态中的项目进行比较，然后：

如果是活动 ID，则分配“活动”类；
如果不是活动的，它会清除之前的className（如果它是'is-active'；

希望对你有帮助:)

【讨论】：

【解决方案2】：

如果你使用 React 避免直接操作 DOM。你唯一要改变的应该是状态，让 React 处理 DOM。

对于更改类名，我推荐名为类名的库 (https://github.com/JedWatson/classnames)。在你的包大小中，它只会占用 588 个字节。

如果您不想使用第三方库，请使用 JavaScript 的模板文字来执行此操作。

例子：

<div className={ `list-item ${this.state.active ? "active" : ""}` }>...</div>

【讨论】：

【解决方案3】：

如果您在应用中使用 react-router 处理导航，则可以使用 <NavLink> 组件，该组件接受一个 prop 以在 url 匹配时添加一个类。

<NavLink to="/yourPath" activeClassName="is-active">Home<NavLink>

要在您的项目中使用 NavLink，您必须导入它

import { NavLink, Route } from 'react-router-dom'

【讨论】：