Question

我想在单击按钮时更改其样式。

下面是我的文件。

App.js：

class Test extends Component {
  constructor(){
         super();
         this.state = {
              black: true
         }
    }
    changeColor(){
        this.setState({black: !this.state.black})
    }
    render(){
        let btn_class1 = this.state.black ? "blackButton" : "whiteButton";
        let btn_class2 = this.state.black ? "whiteButton" : "blackButton";
        let btn_class3 = this.state.black ? "whiteButton" : "blackButton";

        return (
             <div>
                 <button className={btn_class1}
                         onClick={this.changeColor.bind(this)}>
                           Button1
                  </button>
                  <button className={btn_class2}
                         onClick={this.changeColor.bind(this)}>
                           Button2
                  </button>
                  <button className={btn_class3}
                         onClick={this.changeColor.bind(this)}>
                           Button3
                  </button>
             </div>
        )
    }
}
export default App;

color.css：

button{
  width: 80px;
  height: 40px;
  margin: 15px;
}
.blackButton{
  background-color: black;
  color: white;
}

.whiteButton{
  background-color: white;
  color: black;
}

一开始，我希望我的button1具有黑色背景，而button2和button3应该具有白色背景。

当我单击button2时，它应该具有黑色背景，而button1和button3应该具有白色背景。

与button3类似：单击按钮时，它应具有黑色背景，而button1和button2应更改为白色背景。

Answer 1

您可以做的事情比这简单得多。使用状态保存当前活动按钮的索引。创建所需大小的数组。使用.map函数创建按钮进行迭代。使活动按钮的索引等于该状态的活动变量。

class Test extends Component {
  constructor(){
         super();
         this.state = {
              active: 0
         }
    }
    changeColor = (i) => {
        this.setState({active: i})
    }
    render(){
        return (
             <div>
                 {Array.apply(null, Array(3)).map((el, i) => {
                 const active = this.state.active === i
                 <button key={i} className={active ? 'blackButton' : 'whiteButton'}
                         onClick={() => this.changeColor(i)}>
                           `Button${i + 1}`
                  </button>
             </div>
        )
    }
}
export default App;

Answer 2

方法1
一种简单的方法是保持一个包含深色按钮名称的状态，因为一次只有一个按钮是深色的，然后在按钮上单击时，将btn名称传递给使用此按钮名称设置该状态的函数。它会保留深色按钮的名称
然后通过与darkButton的当前状态进行比较，将className添加到btns

class Test extends Component {
  constructor() {
    super();
    this.state = {
      darkBtn: "btn1"
    };
  }

  changeColor = (btn) => {
    this.setState({ darkBtn: btn });
  };

  addDarkClass = (btn) => {
    if (this.state.darkBtn === btn) return "blackButton";
    else return "whiteButton";
  };

  render() {
    return (
      <div>
        <button
          className={this.addDarkClass("btn1")}
          onClick={this.changeColor.bind(this, "btn1")}
        >
          Button1
        </button>
        <button
          className={this.addDarkClass("btn2")}
          onClick={this.changeColor.bind(this, "btn2")}
        >
          Button2
        </button>
        <button
          className={this.addDarkClass("btn3")}
          onClick={this.changeColor.bind(this, "btn3")}
        >
          Button3
        </button>
      </div>
    );
  }
}

export default Test;

在这里，我创建了一个用于添加深色类的函数，该函数将接受btn名称，然后通过与当前状态值进行比较来返回深色白类。

METHOD-2
如果您的按钮没有太多单独的属性，则可以使用map。

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

  changeColor = (btn) => {
    this.setState({ darkBtn: btn });
  };

  btns = ["Button1", "Button2", "Button3"];

  render() {
    return (
      <div>
        {this.btns.map((btn, i) => (
          <button
            key={i}
            onClick={this.changeColor.bind(this, i)}
            className={this.state.darkBtn === i ? "blackButton" : "whiteButton"}
          >
            {btn}
          </button>
        ))}
      </div>
    );
  }
}

export default Test;

Answer 3

正在工作

import React, { useState } from 'react';   
import './App.css';
const App = () => {
  const [current, setCurrent] = useState(0);

  const renderComp = () => {
    return [0, 1, 2].map(el => {
      return <button 
      className={el === current ? 'blackButton': 'whiteButton'} 
      onClick={()=> setCurrent(el)}
      key={el} > {`Button${el+1}`} </button>
    })
  }

  return (
    <div>
      {renderComp()}
    </div>
  )
}

在反应中单击按钮时在多个按钮样式之间切换

3 个答案: