Блог

 class FlyWings extends FlyBehaviour {
  fly = () => {
    return <p>I can Fly</p>
  };
}


class MallardDuck extends Duck {
  constructor(props) {
    super();
    this.state = {
      canFly: false,
      canQuack: false,
    };
  }
  quack = () => {
    const quack = new QuackSound();
    return quack.quack();
  };

  fly = () => {
    const fly = new FlyWings();
    return fly.fly();
  };


  render() {
    return (
      <div>
        <img
         className="image"
          src={mallardDuck}
          alt="mallardDuck" />
        <Button
          onClick={(event) => {
            event.preventDefault();
            this.setState({ canFly: true });
          }}
          className="canFly"
        >
          Fly
        </Button>
        <Button
          onClick={(event) => {
            event.preventDefault();
            this.setState({ canQuack: true });
          }}
        >
          Quack
        </Button>
        {this.state.canQuack ? this.quack() : null}
        {this.state.canFly ? this.fly() : null}
      </div>
    );
  }
}


  

CSS —

 .canFly{
 animation: fly-animation 5s;
    position: relative;
}

@keyframes fly-animation{
    from{
        top: 0;
        left: 0;
    }
    40%{
        top: -400px;
        left: 600px;
    }
    70%{
        top: 0;
    }
    to{
        top: 0;
        left: 0;
    }
}

  

При нажатии кнопки fly я хочу, чтобы изображение моего MallardDuck летало. Как я могу получить доступ к кнопке
<img className="image"src={mallardDuck} alt="mallardDuck" /> «Через мою кнопку». Я просто хочу, чтобы изображение mallardDuck летало, как я могу изменить имя класса <img/> при нажатии кнопки Fly! Есть ли какой-либо способ изменить имя класса тега при нажатии кнопки?

Просто используйте свое canFly состояние, чтобы условно изменить имя класса вашего img.

  <img
     className={`image ${this.state.canFly ? 'canFly' : '' }`}
      src={mallardDuck}
      alt="mallardDuck" />
  

Также Is there any way to change the classname of a tag when a button is clicked ? есть множество примеров об этом здесь, на SO. Мне трудно поверить, что вы не нашли свой ответ. Просто выполните поиск change class conditionally react