Блог

Я работаю над приложением, в котором есть модуль React Flipcard — но я заметил, что flipcard не будет откидываться назад в некоторых ситуациях, когда пользователь слишком быстро зависает — я попытался ввести состояние — не просто isFlipped, но и состояние переключения — чтобы избежать многократного запуска flip несколько раз, еслиэлемент все еще переворачивается — но также у меня есть тайм-аут, чтобы вернуться к frontcard, чтобы фронт вернулся.

Есть ли способ улучшить качество и обработку этой flipcard.

https://codesandbox.io/s/proud-morning-duo0k?file=/src/FlipIconCard.js

 import React, { Component } from 'react';
import ReactCardFlip from 'react-card-flip';
import './FlipIconCard.scss';

class FlipIconCard extends Component {
    constructor() {
      super();
        this.state = {
        isFlipped: false
      };
      this.handleToggle = this.handleToggle.bind(this);
      this.resetToFront = this.resetToFront.bind(this);
    }

    handleToggle(e) {
      e.preventDefault();
      this.setState(prevState => ({ isFlipped: !prevState.isFlipped }));

      this.setState({ isFlippping: true });
      if(this.state.isFlippping){
        setTimeout(
            function() {
                this.setState({ isFlippping: false });
            }
            .bind(this), 600
        );
      }

      if(!this.state.isFlippping){
        this.resetToFront();
      }
    }

    resetToFront() {
      let timer = setTimeout(
          function() {
            if(this.state.isFlipped) {
              this.setState({ isFlipped: false });
              clearTimeout(this.state.timer);
            }
          }
          .bind(this), 4000
      );
      this.setState({ timer: timer });
    }

    render() {
        return (
          <div className="flip-icon-card">
            <div className="flip-icon-flipper">
              <ReactCardFlip isFlipped={this.state.isFlipped} flipDirection="horizontal">
                <div onMouseOver={this.handleToggle}>
                  <div className="flip-card-contents"><img className="icon-badge" src={require('../../../img/icons/' this.props.icon)} alt="" /></div>
                </div>         
                <div onMouseLeave={this.handleToggle}>
                  <div className="flip-card-contents backcard"><div className="element">{this.props.text}</div></div>
                </div>
              </ReactCardFlip>
            </div>
            <div>{this.props.label}</div>
          </div>
        );
    }
}

export default FlipIconCard;
  

Вы немного усложнили это, вы могли бы определить функцию, которая получает флаг, и установить соответствующее состояние:

 setFlipped(flipped) {
  this.setState({ isFlipped: flipped });
}
  

И в оболочке зарегистрируйте события следующим образом:

 <div
  className="flip-icon-flipper"
  onMouseLeave={() => this.setFlipped(false)}
  onMouseOver={() => this.setFlipped(true)}
>
  

Вот рабочий пример