时间戳

首页 > 解决方案 > 从动态构建的侧边栏按钮列表中添加/删除活动类

reactjs - 从动态构建的侧边栏按钮列表中添加/删除活动类

问题描述

我正在为我的 react 项目构建引导侧边栏，其中包含动态生成的按钮列表。单击时我想将active类添加到单击的按钮并从任何其他按钮中清除它（如果选择了一个）。

我阅读了有关classNames库的信息，但无法完成这项工作。以下是其中一组按钮的示例：

类名：

var btnClass = classnames({
      btn: true,
      'btn-link': true,
      'nav-link': true,
      'active': // not sure what to use here
    });

按钮示例

<ul class="nav flex-column">
   { checkingAccounts.map((account) => {
       return (
         <li className="nav-item">
           <button eventKey={account.id} type="button" className={btnClass} onClick={this.handleAccountSelect} value={account.id}>
             { account.account_name }
           </button>
         </li>
       )
   })}
</ul>

和我的状态和处理程序

this.state = {
      data: [],
      checkingAccounts: [],
      savingsAccounts: [],
      creditCardAccounts: [],
      selectedAccount: null,
    }
  }

  handleAccountSelect = (event) => {
    console.log(event)
    this.props.handleAccountSelect(event.target.value)
    this.setState({
      selectedAccount: event.target.value
    })
  }

标签： reactjstwitter-bootstrap

解决方案

您需要将其btnClass放在循环内，以便每个按钮更改，您可以与状态中的选定项目进行比较。

<ul class="nav flex-column">
   {checkingAccounts.map((account) => {
      var btnClass = classnames({
        btn: true,
        'btn-link': true,
        'nav-link': true,
        'active': state.selectedAccount === account.id // whatever value is .value
      });

       return (
         <li className="nav-item">
           <button eventKey={account.id} type="button" className={btnClass} onClick={this.handleAccountSelect} value={account.id}>
             { account.account_name }
           </button>
         </li>
       )
   })}
</ul>

推荐阅读