Блог

Я хотел бы изменить цвет фона каждого div, нажав на кнопку. Я бы хотел, чтобы это работало так::

Все они начинаются с белого. Затем нажмите кнопку, и верхний div станет синим. Нажмите еще раз, первый div станет белым, второй div станет синим. Нажмите еще раз, и третий станет синим, а второй — белым. Нажмите еще раз, и третий станет белым, а первый — синим, и он продолжает работать.

 import React, { Component } from 'react';

class Page extends Component {
    constructor(props) {
        super(props);
        this.state = {
            color:"white"
        }
    }
    changeColor = () => {
        if(this.state.color ==="white"){
            this.setState({color:"blue"})
        }
        if (this.state.color === "blue") {
            this.setState({ color: "white" })
        }
    }

    render() {
        return (
            <>
                <div className="box" style={{background:this.state.color}}></div>
                <div className="box" style={{ background: this.state.color}}></div>
                <div className="box" style={{ background: this.state.color }}></div>
                <button onClick={this.changeColor}>Click me</button>
              </>
        );
    }
}

export default Page;
 

Вы можете использовать количество в своем состоянии вместо цвета, чтобы вы знали, для какого div вы хотите установить фон:

 class Page extends Component {
  constructor(props) {
      super(props);
      this.state = {
          count: 0
      }
  }
  changeColor = () => {
    let next = this.state.count   1;
    if (next === 4) {
      next = 0;
    }
    this.setState({count: next})
  }

  render() {
    return (
      <>
        <div className="box" style={{ background: this.state.count === 1 ? "blue" : "white" }}>a</div>
        <div className="box" style={{ background: this.state.count === 2 ? "blue" : "white" }}>b</div>
        <div className="box" style={{ background: this.state.count === 3 ? "blue" : "white" }}>c</div>
        <button onClick={this.changeColor}>Click me</button>
      </>
    );
  }
}
 

Каждый div отвечает за установку своего собственного фона. Я также поместил a, b и c в divs, поскольку они не отображались без какого-либо содержимого.