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;

非常感谢您的建议。我到目前为止只学习React大约一个星期，并且至今为止都热爱它。

欢呼

Answer 1

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

要更改类名，我建议使用称为类名（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与您保持状态的道具进行比较，然后：

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

希望它会有所帮助：）

Answer 3

如果您正在使用react-router处理应用程序中的导航，则可以使用NavLink组件，该组件接受URL匹配时添加类的支持。 <NavLink to="yourPath" activeClassName="is-active">Home<NavLink>

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

3 个答案: