Как добавить имя класса динамически в реагировать JS на выбранной вкладке

Question

Я пытаюсь изменить цвет фона выбранной вкладки.Проблема в том, что я должен добавить динамический класс в динамические данные.

Я пытаюсь добавить класс css в свой код, но этот css выберет Мои все вкладки

{emailActivities.map((activity, i) => {
    return (
        <li
        key={i}
        className={this.state.reportView === false ? "active" : null}
        onClick={() => {

            this.setState({ reportView: false }, this.getReportByActivityId(activity.activityId))
        }}
        >
        {activity.activityTitle}

        </li>   

        )
    })
}

Этот код выберет все мои значения по умолчанию. Я хочу выделить только выбранную вкладку.Как это сделать.

Answer 1

Вместо установки reportView: false вам нужно состояние для activeTabName.

1. Сохранение значения состояния

    this.state= {activeTabName:'set first tab name here for by default active'} 

2. Добавить динамический класс active вот так,

    {emailActivities.map((activity, i) => {
        return (
            <li
            key={i}
            className={this.state.activeTabName=== activity.activityTitle? "active" : null}
            onClick={() => {

                this.setState({ activeTabName: activity.activityTitle}, this.getReportByActivityId(activity.activityId))
            }}
            >
            {activity.activityTitle}

            </li>   

            )
        })
    }

Answer 2

Если количество вкладок фиксировано , это можно реализовать с помощью значения ключа функции карты. Или, если в каждом объекте есть уникальный ключ, такой как activityId, это легко сделать. В этом случае, я думаю, reportView значение состояния бесполезно.

// initialize state
this.state={
    activeTabId: -1, //if you need to select one tab, you can init it by that's activityId
}
...
{emailActivities.map((activity, i) => {
    return (
        <li
        key={i}
        className={activity.activityId === this.state.activeTabId ? "active" : null}
        onClick={() => {
            this.setState({ activeTabId: activity.activityId };
            this.getReportByActivityId(activity.activityId));
        }}
        >
        {activity.activityTitle}

        </li>   

        )
    })
}

Вы можете легко выбрать первую вкладку, используя key, если количество вкладок равно fixed .

// initialize state
this.state={
    activeTabId: 0, // Select first tab.
}
...
{emailActivities.map((activity, key) => {
    return (
        <li
        key={key}
        className={key === this.state.activeTabId ? "active" : null}
        onClick={() => {
            this.setState({ activeTabId: key };
            this.getReportByActivityId(activity.activityId));
        }}
        >
        {activity.activityTitle}

        </li>   

        )
    })
}

Еще лучше, используйте styled-component вместо изменения className. Для более подробной информации, пожалуйста, проверьте. Учебник по реагированию на стилизованные компоненты Документация по стилевым компонентам

Answer 3

Вы можете использовать activityId для проверки выбранной вкладки.

{
  emailActivities.map((activity, i) => {
    return (
      <li
        key={i}
        className={this.state.activeTab === activity.activityId ? 'active' : null}
        onClick={() => {
          this.setState(
            { reportView: false, activeTab: activity.activityId },
            this.getReportByActivityId(activity.activityId)
          );
        }}
      >
        {activity.activityTitle}
      </li>
    );
  });
}