如何在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;

非常需要建议。

- Ronald Langeveld

Answer 1

你必须避免自己触碰DOM，让React来为你完成。

你需要在状态(state)中保留一个信号(signal)，告诉你列表中的元素是否处于活动状态，并使用该信号(signal)在渲染阶段中设置类(class)或不设置类(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进行比较，然后:

1. 如果它是活动的id，则分配“is-active”类;
2. 如果不是活动的id，则清除先前的className(如果先前的类名为'is-active');

希望对你有所帮助 :)

- 0xc14m1z

Answer 2

如果你正在使用React，请避免直接操纵DOM。你所要改变的唯一内容应该是状态，让React处理DOM。

对于更改类名，我建议使用一个名为classnames的库（https://github.com/JedWatson/classnames）。它只会占用你打包后的大小的588个字节。

如果你不想使用第三方库，那么可以使用JavaScript的模板字面量来完成此操作。

例如：

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

- Orkhan Huseynli

Answer 3

如果您在应用程序中使用react-router来处理导航，您可以使用组件，该组件接受一个属性以在url匹配时添加类。要在项目中使用NavLink，必须先导入它。

例如：Home 可以用于导航到主页。其中to属性表示跳转的路径，activeClassName属性表示匹配成功后需要添加的类名。

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

- hawks