Блог

Привет, я пытаюсь создать кнопку в React, которая при каждом нажатии дает новый цвет, это происходит 3 раза, а затем возвращается к опции по умолчанию. Я пробовал использовать циклы и все такое, но все равно это не увенчалось успехом, может кто-нибудь, пожалуйста, помочь?

Код:

 import React from 'react';

class Button extends React.Component {   
  constructor(){
  super(); 
  this.state = {
      color_black: true,
    }
  }
  changeColor(){
          this.setState({color_black: !this.state.color_black})
  }
      render(){
      let bgColor = this.state.color_black ? this.props.color : this.props.color2
      return (
      <div>
          <button style={{backgroundColor: bgColor}} onClick={this.changeColor.bind(this)}>Button1</button>
      </div>
    )
  }
}

class Button extends React.Component {
      render(){
      return (
      <div>
          <Button color="blue" color2="red" />
          
      </div>    
    )
  }
}
export default Button;
 

Вы можете иметь множество цветов и сохранять их в качестве константы. Затем создайте состояние для хранения индекса массива, начиная с 0. Затем, когда вы нажмете кнопку, увеличьте индекс и используйте массив[индекс] в качестве своего цвета. Когда индекс равен = 3, сбросьте значение до 0.