Question

我正在尝试创建一种翻转卡效果，如果我单击某张卡片，它将翻转。但是，如果我再单击另一张卡，则希望原始卡向后翻转。这意味着在所有卡上都有某种全局切换，但是其中一个被本地切换覆盖。我不确定执行此操作的最React-y方式-我尝试在两个级别上都使用useState钩子来实现它，但是运气不高。

我正在使用样式组件，“翻转”道具决定了Y变换。

这是翻页卡组件，您可以看到到目前为止我已经尝试过的内容：

const PortfolioItem = props => {
  const [flipped, setFlipped] = useState(false)

  return (
    <PortfolioItemStyles onClick={() => setFlipped(!flipped)}>

// what I'm trying to say here is, if the individual card's 'flipped' is set to true, 
use that, otherwise use props.flipped which will be set to false

      <PortfolioItemInnerStyle flipped={flipped ? flipped : props.flipped}>
        <PortfolioItemFront >
          {props.image}
          <PortfolioImageCover className="img-cover" />
          <PortfolioItemHeader>{props.title}</PortfolioItemHeader>
        </PortfolioItemFront>
        <PortfolioItemBack>
            <h1>Hello there</h1>
        </PortfolioItemBack>
      </PortfolioItemInnerStyle>
    </PortfolioItemStyles>
  )
}

function PortfolioStyles() {
    const [ allFlipped, setAllFlipped ] = useState(false);

  return (
    <PortfolioContainer>
      {portfolioItems.map(item => {
        return <PortfolioItem image={item.image} flipped={allFlipped} title={item.title} onClick={() => setAllFlipped(false)} />
      })}
    </PortfolioContainer>
  )
}

我使用的逻辑显然是错误的，但是我想知道这样做的“最佳实践”方法是什么？在普通JS中，您将使用单个事件处理程序，并在其上使用event.target来确保您隔离了元素，但是我不确定如何在React中处理该事件。任何帮助将不胜感激。

Answer 1

我将只在容器组件上亲自管理状态。假设您将存储翻盖卡的索引而不是真/假状态。然后，onClick会更改当前索引，并通过检查index === currentIndex来计算翻转值。像这样：

const PortfolioItem = props => {

  return (
    <PortfolioItemStyles>
      <PortfolioItemInnerStyle flipped={props.flipped}>
        <PortfolioItemFront >
          {props.image}
          <PortfolioImageCover className="img-cover" />
          <PortfolioItemHeader>{props.title}</PortfolioItemHeader>
        </PortfolioItemFront>
        <PortfolioItemBack>
            <h1>Hello there</h1>
        </PortfolioItemBack>
      </PortfolioItemInnerStyle>
    </PortfolioItemStyles>
  )
}

function PortfolioStyles() {
    const [ currentFlippedIndex, setCurrentFlippedIndex ] = useState(-1);

  return (
    <PortfolioContainer>
      {portfolioItems.map((item, index) => {
        return <PortfolioItem image={item.image} flipped={index === currentFlippedIndex} title={item.title} onClick={() => setCurrentFlippedIndex(index)} />
      })}
    </PortfolioContainer>
  )
}

在React中切换翻页卡

1 个答案: