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

我有一个链接列表

我在单击时添加了一个类，称为“是活动的”。同时，我想删除所有现有的“是积极的”，除了在我点击的链接。可能只有一个类为“IsActive”的元素，因为该类将“live”页面。（使用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;

类菜单扩展组件{
建造师（道具）{
超级（道具）；
this.state={addClass:false}
};
handleClick（e）{
如果（e.target.class=='处于活动状态'）{
e、 target.className=''；
console.log（'remove'）
}否则{
e、 target.className='处于活动状态'；
console.log（'addclass'）
}
}  
render（）{

{this.props.getList.map（list=>
{list.title}
)}

}
}
导出默认侧菜单；

---

非常感谢您的建议。

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

对于更改类名，我建议使用名为classnames（）的库。在您的包大小中，它将只占用588字节

如果您不想使用第三方库，那么可以使用JavaScript的模板文本来实现这一点

例如：

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

。。。

您必须避免自己触碰DOM，让我们为您这样做

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

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>
}

状态={
activeId:null//默认情况下未选择任何内容，但这取决于您。。。
}
handleClick（事件，id）{
this.setState（{activeId:id}）
}
render（）{

{
this.props.getList.map（list=>
{list.title}
)
}

}

这样，在每个

渲染

时，将

getList

道具中每个项目的

id

与您保持的状态进行比较，然后：

如果是活动id，则分配“是活动”类

如果它不是活动的，它将清除前面的

类名

（如果它是'is active'

---

希望它有帮助：）

如果您使用react路由器处理应用程序中的导航，您可以使用

组件，该组件在url匹配时接受用于添加类的道具

Home

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

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