Анимация Lottie начинается при нажатии на слой, который содержит его, как это остановить?

Question

У меня есть анимация лотереи, которую я запускаю из родительского компонента, проблема в том, что по какой-то причине весь слой компонента лотереи активен и активирует анимацию.

Это код, который я использую:

constructor(props) {
    super(props);
    this.state = {
      isStopped: true,
      isPaused: false,
      Animated: 0,
    };
    this.defaultOptions = {
      loop: false,
      autoplay: false,
      animationData: animationData
    };
  }

  clickHandler = () => {
    this.setState({ 
        isStopped: false,
        Animated: 0
    });
    console.log("clicked");
  };

  render() {
    return (
      <div id="ethdrop">
        <Lottie
          className='animation-class'
          options={this.defaultOptions}
          isStopped={this.state.isStopped}
          isPaused={this.state.isPaused}
          Animated={this.state.Animated}  
        />
    </div>
    );
  }

Вот как выглядит дом:

Iне могу найти ничего, что могло бы вызвать это, если у кого-то из вас есть какие-либо идеи, пожалуйста, дайте мне знать.

Answer 1

Недокументированное свойство: isClickToPauseDisabled.Если для этого параметра установлено значение false (значение по умолчанию), вы можете приостановить и возобновить анимацию, нажав на нее.Если вы не хотите, чтобы это происходило, установите для этого свойства значение true.

Пример:

<Lottie options={this.defaultOptions}
    ...
    isClickToPauseDisabled={true} 
/>

Ссылка: https://github.com/chenqingspring/react-lottie/pull/54

Answer 2

Сделайте это изменение в вашем clickHandler:

clickHandler = (e) => {
    e.preventDefault()
     this.setState({ 
        isStopped: false,
        Animated: 0
     }); 
    console.log("clicked"); 
};

Надеюсь, это поможет.