Question

我有两个不同的按钮，我试图在React中添加活动类，但是单击时会同时添加两个类。活动班背景为白色。头等舱有蓝色背景。这是我的代码。

import React, { PureComponent } from "react";

class AnimationSettings extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      active: true
    };
  }

  handleClick = () => {
    this.setState({ active: !this.state.active });
  };

  render() {
    const { active } = this.state;
    console.log(active);
    return (
      <div className="animation-buttons">
        /}
        <button
          onClick={this.handleClick}
          className={active ? "btn-animation" : "active-animation"}
        >
          On
        </button>
        <button
          onClick={this.handleClick}
          className={active ? "btn-animation" : "active-animation"}
        >
          Off
        </button>
      </div>
    );
  }
}

export default AnimationSettings;

Answer 1

一种解决方法是为每个按钮保持单独的变量状态。

示例

class AnimationSettings extends React.PureComponent {
  state = {
    isFirstActive: false,
    isSecondActive: false
  };

  handleFirstClick = () => {
    this.setState(({ isFirstActive }) => ({ isFirstActive: !isFirstActive }));
  };

  handleSecondClick = () => {
    this.setState(({ isSecondActive }) => ({
      isSecondActive: !isSecondActive
    }));
  };

  render() {
    const { isFirstActive, isSecondActive } = this.state;

    return (
      <div className="animation-buttons">
        <button
          onClick={this.handleFirstClick}
          className={isFirstActive ? "btn-animation" : "active-animation"}
        >
          On {isFirstActive && "(active)"}
        </button>
        <button
          onClick={this.handleSecondClick}
          className={isSecondActive ? "btn-animation" : "active-animation"}
        >
          Off {isSecondActive && "(active)"}
        </button>
      </div>
    );
  }
}

ReactDOM.render(<AnimationSettings />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

如果两个按钮不应同时处于活动状态，则可以更改条件：

打开：

active ? "btn-animation" : "active-animation"

关闭：

!active ? "btn-animation" : "active-animation"

Answer 3

这是可行的解决方案，

class AnimationSettings extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      active: true,
      buttonIdsArray: ["button1", "button2"]
    };
  }
  componentDidMount() {
    this.initButton();
  }
  initButton = () => {
    this.state.buttonIdsArray.forEach(button => {
      document.getElementById(button).classList.remove("active-button");
      document.getElementById(button).classList.add("inactive-button");
    });
  };
  handleClick = id => {
    this.initButton();
    document.getElementById(id).classList.add("active-button");
    document.getElementById(id).classList.remove("inactive-button");
    this.setState({ active: !this.state.active });
  };

  render() {
    const { active } = this.state.active;
    console.log(active);
    return (
      <div className="animation-buttons">
        <button
          id="button1"
          onClick={() => this.handleClick("button1")}
          className={active ? "btn-animation" : "active-animation"}
        >
          On
        </button>
        <button
          id="button2"
          onClick={() => this.handleClick("button2")}
          className={active ? "btn-animation" : "active-animation"}
        >
          Off
        </button>
      </div>
    );
  }
}

ReactDOM.render(<AnimationSettings />, document.getElementById("root"));

.active-button {
  background-color: #fff;
}
.inactive-button {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

我希望对您有帮助！

如何在反应中的不同按钮上添加“活动”类onClick

3 个答案: