如何在 React 中动态添加元素上添加/删除 Select 类 onClick

Question

我是反应并尝试创建 TABS 的初学者。我想知道如何管理状态或单击特定选项卡以添加“选定”类并从其他选项卡中删除相同的类

你可以在这里查看我的代码 https://codesandbox.io/s/elated-mestorf-005yq

请帮忙

提前致谢:)

Answer 1

您应该将您的活动 ID 存储为一个状态。并且不要使用索引作为键。 code

Answer 2

使用数组的索引值作为选中条件

class Tabs extends Component {
  constructor() {
    super();
    this.state = {
      selected: 0
    };
  }

  selectTab = (key) => {
    this.setState({
      selected: key
    })
  };
  render() {
    console.log(data.length);
    return (
      <div className={style.tabsCont}>
        <ul>
          {data.map((val, key) => {
            return (
              <li
                id={`tabs${key + 1}`}
                onClick={(event) => this.selectTab(key)}
                className={this.state.selected === key ? style.selected : ""}
              >
                {val.tabs}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}