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

Question

我有一个链接列表。

我正在添加一个名为“is-active”的点击类。 同时，我想删除所有现有的“is-active”，除了我点击的链接。 可能只有一个具有“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;

建议将不胜感激。

Answer 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与您保持在状态中的项目进行比较，然后：

1. 如果它是活动 id，则分配 'is-active' 类；
2. 如果它不是活动的，则清除前一个className （如果它是“活动的”；

希望能帮助到你 ：）

Answer 2

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

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

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

例子：

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

Answer 3

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

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

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

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