翻牌游戏

Question

最初，所有卡片都是正面朝下的。每当单击一张卡片时，它就会翻过来朝上，而任何以前朝上的卡片都会翻过来朝下。

实现React component Cards，它接受数量属性，它定义了应该有多少张卡。该组件应呈现为表元素。

例如，在单击Cards组件上的第二个单元格后，将呈现为：

<Cards amount={4} />

我无法使它工作，请帮帮我

const Cards = (props) => {
 const [cardFlipped, setCardFlipped] = React.useState(false);
  
  const handleClick = () => {
    setCardFlipped(!cardFlipped);
  }
  
  const cardSides = handleClick ? 'up' : 'down'
  
  return (
  <div>
  <table>
  <tbody>
    <tr>
      <td><button onClick={handleClick}>{cardSides}</button></td>
      <td><button onClick={handleClick}>{cardSides}</button></td>
      <td><button onClick={handleClick}>{cardSides}</button></td>
      <td><button onClick={handleClick}>{cardSides}</button></td>
    </tr>
  </tbody>
  </table>
  </div>
  )
};

document.body.innerHTML = "<div id='root'> </div>";
  
const rootElement = document.getElementById("root");
ReactDOM.render(<Cards amount={4} />, rootElement);

let row = document.getElementById("root").getElementsByTagName("tr")[0];
if(row) {
  let cell = row.getElementsByTagName("td")[1];
  if(cell) {
    cell.click();
  }
}

Answer 1

这是我在CodeSandbox上生成的一个简单逻辑，用于翻转牌。请转到此链接here。你可以通过here查看它的工作情况。

解释：

1. generateCardData：我添加了两个新方法，一个是"generateCardData“。此方法将生成{ id：""，value: false }形状的对象。我们之所以需要这样做，是因为你必须跟踪每一张带有ID的卡，以知道哪张卡被点击了。

1. toggleCard：添加的另一个方法是"toggleCard“。此方法接收所单击的目标id，并且将卡片值反转为true.