如何使用 React 在单击时动态添加和删除 class？

Question

我有一个 link 列表。

我在单击时添加了一个 class，称为 "is-active"。同时，我想删除所有现有的 "is-active"，除了我点击的 link。 class "is-active" 可能只有一个元素，因为那将是 'live' 页面。（使用布尔玛css）

这是我目前试过的代码。它添加了 classes 但没有删除它们。

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;

非常感谢您的建议。

Answer 1

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

要更改 class 名称，我会推荐名为 classnames (https://github.com/JedWatson/classnames) 的库。它只会占用您的包大小的 588 字节。

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

示例：

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

Answer 2

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

您想保持一个信号，告诉您列表中的元素是否处于活动状态，并使用该信号在您的渲染阶段设置 class 或不：

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，它分配 'is-active' class;
如果它不是活动的，它会清除之前的 className（如果它是 'is-active'；

希望对您有所帮助:)

Answer 3

如果您使用 react-router 来处理应用程序中的导航，您可以使用 <NavLink> 组件，该组件接受在 url 匹配时添加 class 的道具。

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

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

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

如何使用 React 在单击时动态添加和删除 class？

How to dynamically add and remove class on click with React?

javascript

button

classname

reactjs