在反应按钮上添加和删除类答案

【问题标题】：Add and remove class on react buttons在反应按钮上添加和删除类
【发布时间】：2020-03-23 01:47:39
【问题描述】：

我正在尝试创建两个按钮，当它们被单击时会改变其类。因此，当单击第一个按钮时，它将为其添加“活动”类并删除同级按钮的“活动”类。

现在我已经取得了一些进展，但不起作用的是我只想在单击元素时添加活动类。所以默认情况下按钮不应该有任何类。然后当用户单击第一个按钮时，活动类将添加到该按钮，然后如果用户单击按钮二，它将从按钮一中删除活动类并将其添加到按钮二。没有按预期工作的另一件事是，当我单击已单击且已激活的按钮时，它会更改类和状态。所以应该是当我点击已经选择的按钮时它不应该做任何事情，具有活动状态的按钮应该保持活动状态。它基本上应该作为 jQuery toggleClass 函数工作。

我的反应代码：

import React, { Component } from "react";
import css from "./styles.css";

export default class TypeButtons extends Component {
  constructor(props) {
    super(props);
    this.state = { isActive: true };
  }

  ToggleClass = (e) => {
    this.setState({ isActive: !this.state.isActive })
  }

  render() {
    return (
      <div className={css.buttonsContainer}>
        <button onClick={this.handleClick} className={( !this.state.isActive ? '' : 'active' )} onClick={this.ToggleClass}>
          Button 1
        </button>
        <button onClick={this.handleClick} className={( this.state.isActive ? '' : 'active' )} onClick={this.ToggleClass}>
          Button 2
        </button>
      </div>
    );
  }
}

CSS：

.active {
  background: green;
}

我已经创建了 Codesandbox 示例：https://codesandbox.io/s/vigorous-pare-3zo0s

长话短说，只有在单击按钮后才应添加类，因此默认情况下，两个按钮在开始时不应具有活动类。此外，当我单击带有活动类的按钮时，它不应更改活动类，而应保持活动状态，仅当单击相反的按钮时才应更改状态。

任何帮助都意义重大！

【问题讨论】：

标签： html css node.js reactjs

【解决方案1】：

https://codesandbox.io/s/naughty-allen-vrj3r

在这里，我编辑了您的代码框。基本上我在状态中存储的是一个标识活动按钮的键。默认是null，因为这正是您想要的。

我为每个按钮分配了整数，但这可以是任何你想要的。您还可以保留整数，并通过 .map() 添加按钮以获得动态数量的按钮示例（请参阅康斯坦丁的回答）。

【讨论】：

【解决方案2】：

class TypeButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = { active: "0" };
    this.buttons = [
        { id: "1", title: "Button 1" },
        { id: "2", title: "Button 2" }
    ];
  }

  handleClick = e => {        
    this.setState({ active: e.target.dataset.id });
  };

  render() {
    return (
        <div>
            {this.state.active}
            {this.buttons.map(({ id, title }) => {
                return (
                    <button
                        key={id}
                        data-id={id}
                        onClick={this.handleClick}
                        className={this.state.active === id ? "active" : ""}
                    >
                        {title}
                    </button>
                );
            })}
        </div>
    );
  }
 }

【讨论】：