时间戳

首页 > 解决方案 > 如何使用 React 和 Hooks 选择不同的卡片并将选择的卡片返回给父级？

reactjs - 如何使用 React 和 Hooks 选择不同的卡片并将选择的卡片返回给父级？

问题描述

我正在尝试选择一组卡片并将所选卡片分为两组。

let playerList = ['Jason', 'Mike', 'Bruce', 'Josh', 'Rick', 'William']
const Cards = () => {
   const [selectedPlayer, setSelectedPlayer] = useState('')

   return (
      <div className={styles.container}>
        <Grid container spacing={2} justify="center">
            {/* returns a PlayerCard for each element of the array */}
            {playerList.map((value, index) => {
                return <PlayerCard key={index} onClick={value => setSelectedPlayer(value)} playerName={value} />
            })}
        </Grid>
        {selectedPlayer}
      </div>
   )
}

我让它从子组件返回 selectedPlayerName 到父组件，但我不知道如何以这种方式将信息存储在数组中。

如果我们选择 4 个玩家，数组应该是这样的：['Jason', 'Mike', 'Josh', 'Rick']所以我可以随机选择每个组的玩家。

那么，当我选择一张卡片时，如何制作一个数组来存储这些玩家呢？

卡片的外观（您可以通过鼠标单击选择卡片）：

球员卡

标签： reactjsreact-hooks

解决方案

你必须像这样在反应钩子中声明一个数组

const [selectedPlayer, setSelectedPlayer] = useState([])

之后，您必须像这样在 selectedPlayer 中设置值

{playerList.map((value, index) => {
                return <PlayerCard key={index} onClick={value => setSelectedPlayer([...selectedPlayer, value])} playerName={value} />
            })}

它会正常工作

推荐阅读