如何制作抽认卡

您将在那些“JavaScript 项目”文章中看到的项目中，有一个“教育应用程序”的建议。在概念上一切都很好，但很容易陷入无底洞的可能性，并就最佳教学方式进行辩论。我无法为您提供所有这些帮助，但如果您认为抽认卡对您和您的应用程序有好处，请加入！注意：我为此使用了普通话，但这几乎适用于任何主题/语言。

第 1 步：设置数据

您需要在抽认卡中设置要测试的内容。这可以为您的应用程序采用数据库的形式，或者（像我一样）一个带有 JSON 数组的简单 .js 文件。如果您对后一个选项感兴趣，它需要如下所示：

第 2 步：导入 React-Card-Flip

我强烈建议使用 React-Card-Flip 之类的东西来为您的代码明智地完成大部分繁重的工作。如果有一个包做类似的事情，你更喜欢，请随意使用它，但有些格式可能不同，所以请记住这一点。我们稍后会做很多我们自己的事情。这是 React-Card-Flip 文档的链接： https://www.npmjs.com/package/react-card-flip

第 3 步：设置卡组件

现在我们需要制作卡片组件，......通过将其制作为组件，因为我们需要状态。您还需要在此处导入 ReactCardFlip 或类似的东西。使卡片成为扩展 Component 的类。调用state并将其设置为guess，这将是一个空字符串，isFlipped，false，showAnswer，也是false。还要使一个handleClick 等于this.handleClick.bind(this)，这将在稍后发挥作用。

第 4 步：我们需要的功能

现在我们需要一些函数来让一切正常工作。首先，displayAnswer 将是一个 setState 函数，它将 showAnswer 更改为 true。接下来，handleClick(e)，调用e.preventDefault()，然后我们将setState变成一个相当复杂的三元组。基本逻辑是，无论 isFlipped 的当前状态是什么，都让它相反，showAnswer 也是如此。

步骤 4.5（可选）：更改猜测

这是一个可选功能。如果您不想在用户的猜测中计算大写，则需要创建一个函数来自动将猜测设置为小写（或大写，您自己做）。该函数将猜测作为参数。制作一个常量，例如 lowerCaseInput，并将其设置为guess.toLowerCase()。现在我们将猜测的setState 设置为lowerCaseInput。

第 5 步：正确的卡片（正面版）

现在是正确的卡。在渲染语句下，将此抽认卡所需的数据称为道具。同时引入 showAnswer 并猜测为 this.state。在返回下，调用 ReactCardFlip 组件。将 isFlipped 设置为 isFlipped 的状态。 ReactCardFlip 需要包裹卡片的正面和背面。在 ReactCardFlip 中创建两个名为 Card 的 div，每个 div 将围绕正面和背面（我知道这似乎是多余的，但否则它将不起作用）（这也将使卡片的样式更容易，因为您可以设置 Card 并调用一天）。现在我们将制作卡片的正面。制作一个名为front的div。将我们在道具中提取的问题称为文本标签（h1、h2、p 或任何你喜欢的）。现在进行输入。制作类型文本，给它一个类名，值将被猜测。

如果要将猜测重置为全部小写，请添加和 onChange 并将其设置为等于 e => this.changeGuess(e.target.value)。

最后，我们需要一个按钮让用户提交他们的猜测。制作一个按钮，给它一个类名，然后将 onClick 设置为我们之前制作的 this.handleClick。

第 6 步：正确的卡片（背面版）

在第二个 Card div 下，制作一个回调的 div。我们现在将制作一个三元来确定将显示什么。使有条件的 !!showAnswer 强制绝对真或假，而不是真或假答案。如果为真，则显示答案，如果猜测等于答案，则显示并检查是否不是 x。如果 showAnswer 为 false，则让它返回 null。我建议也显示用户的猜测，以便他们可以看到他们的答案是错误的。我还会在另一侧有一个按钮，让他们翻转卡片并重试。（只需从前面复制并粘贴按钮）。