使用 Screenshot API 和 React js 创建一个屏幕截图应用程序

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

鉴于目前全球形势，这正是学习 React JS 的绝佳时机。
我已经学习 React 一个多月了，和大多数语言新手一样，我也陷入了所谓的“教程地狱”。
为了摆脱这种困境，我不得不逼迫自己不断尝试。最终，我完成了一些使用 Redux 和 Context API 的项目，以及一个我将要分享的项目，希望能激发你尝试使用 API 并学习更多知识的兴趣😄

关于我们正在进行的项目

我们将使用屏幕截图 API，通过粘贴到输入框中的 URL 来创建网站屏幕截图。
点击输入框下方的按钮获取屏幕截图后，将显示一个图像文件作为输出结果。

起始文件

使用 create-react-app 创建好文件夹后，我们可以删除 icon.svg 和 app.css 文件。在 src 文件夹中，我们将创建一个名为 components 的文件夹，并在其中创建一个名为 InputForm.js 的文件。最终，所有内容应该看起来像这样。

代码

首先，在 components 文件夹和 Input.js 文件的基础上，我们将创建一个简单的表单，其中包含一个按钮和一个名为“link”的输入框。我们将使用这个输入框来获取输入框的值，并在后续的 API 代码中实现它。以下是相关代码。

将 Input 和 Axios 导入到 App.js 中

下一步是将 InputForm 和 Axios 导入到 App.js 文件中，导入后的代码将如下所示：

Axios 和获取屏幕截图 API

打开Screenshot API网站并点击“文档”，我们将看到以下列表。下一步是导入名为“link”的输入，我们将定位其值并将其导入到 API 的 URL 中，同时还需要包含 Axios 和代码。

现在，通过控制台日志记录我们输入 URL 时获取的数据，我们应该定位到如下图所示的屏幕截图。

设置状态并获取屏幕截图

在输入任何值之前，我们必须先在数据中找到屏幕截图的值
，并将初始状态设置为 null
，然后使用以下代码设置屏幕截图的状态，而不是使用 console.log：

道具和屏幕截图显示

下一步是为 InputForm 添加 props，其值等于我们的函数。在 InputForm 中，下一步是添加 props 和 onSubmit 事件。现在，在 InputForm 下方，下一步是使用 If Else 语句显示 Img，其中我们调用 if this.state 不为空值来显示图像，如下所示。