时间戳

首页 > 解决方案 > React-card-flip 一键翻转所有卡片

reactjs - React-card-flip 一键翻转所有卡片

问题描述

我正在使用 react-card-flip - https://github.com/AaronCCWong/react-card-flip在点击时翻转照片。但是当我有多个时，如果我只点击一个，它就会全部翻转。看起来它会自动更新所有这些状态，即使只需单击一下。有没有办法纠正这个问题？

import React, { Component } from "react"
import string from "prop-types"
import styles from "./styles.module.less"
import ReactCardFlip from "react-card-flip"



class VerticalFlip extends Component {
  constructor() {
    super()
    this.state = {
      isFlipped: false,
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(event) {
    event.preventDefault()
    this.setState(prevState => ({ isFlipped: !prevState.isFlipped }))
  }

  render() {

    return (

      <div className={styles.cards}>
        {team.map((s, i) => {
          return (
            <div key={i}>
              <ReactCardFlip
                isFlipped={this.state.isFlipped}
                flipSpeedFrontToBack={1.0}
                flipSpeedBackToFront={1.0}
                flipDirection="vertical"
              >
                <div key="front" style={this.props.card} onClick={this.handleClick}>
                  <div className={styles.ImageContainer}>
                    <img style={this.props.image} src={s.src} alt={s.alt} />
                  </div>
                </div>

                <div key="back" style={this.props.card} onClick={this.handleClick}>
                  <div className={styles.TextContainer}>
                    <p>
                      <div className={styles.name}>{s.firstname}{s.lastname}</div>
                      <div className={styles.position}>{s.position}</div>
                    </p>
                  </div>
                </div>
              </ReactCardFlip>
            </div>
          );
        })}
      </div>

    )
  }
}

VerticalFlip.propTypes = {
  firstName: string.isRequired,
  lastName: string.isRequired,
  role: string,
}

export default VerticalFlip

标签： reactjs

解决方案

使用该组件渲染每个翻转

const FlipComponent = ({s, card, image}) => {
  const [isFlipped, changeFlip] = useState(false);
  const handleClick = useCallback((event) => {
    event.preventDefault()
    changeFlip(!isFlipped)
  })
  return (
    <ReactCardFlip
      isFlipped={isFlipped}
      flipSpeedFrontToBack={1.0}
      flipSpeedBackToFront={1.0}
      flipDirection="vertical"
    >
      <div key="front" style={card} onClick={handleClick}>
        <div className={styles.ImageContainer}>
          <img style={image} src={s.src} alt={s.alt} />
        </div>
      </div>

      <div key="back" style={card} onClick={handleClick}>
        <div className={styles.TextContainer}>
          <p>
            <div className={styles.name}>
              {s.firstname}
              {s.lastname}
            </div>
            <div className={styles.position}>{s.position}</div>
          </p>
        </div>
      </div>
    </ReactCardFlip>
  );
};

这使得每次翻转的每个状态都是独一无二的。

你需要删除

<div key={i}>
              <ReactCardFlip
                isFlipped={this.state.isFlipped}
                flipSpeedFrontToBack={1.0}
                flipSpeedBackToFront={1.0}
                flipDirection="vertical"
              >
                <div key="front" style={this.props.card} onClick={this.handleClick}>
                  <div className={styles.ImageContainer}>
                    <img style={this.props.image} src={s.src} alt={s.alt} />
                  </div>
                </div>

                <div key="back" style={this.props.card} onClick={this.handleClick}>
                  <div className={styles.TextContainer}>
                    <p>
                      <div className={styles.name}>{s.firstname}{s.lastname}</div>
                      <div className={styles.position}>{s.position}</div>
                    </p>
                  </div>
                </div>
              </ReactCardFlip>
            </div>

上

<FlipComponent key={i} s={s} card={this.props.card} image={this.props.image} />

推荐阅读