如何使用React动态添加和删除类？

Question

我有一个链接列表。

我在点击时添加了一个称为“处于活动状态”的类。同时，我想删除所有现有的“处于活动状态”，但单击的链接除外。类别中只有一个元素是“活动的”，因为它会“活跃”页面。（使用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

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

为了更改类名，我会推荐名为 classnames 的库（https://github.com/JedWatson/classnames）。它只会占用您的包大小中的 588 字节。

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

例子：

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

Answer 2

您必须避免自己接触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，将id每个getList道具的每个道具与您保持状态的道具进行比较，然后：

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

希望能帮助到你 ：）