javascript - 如何使用 'x' 按钮在图像底部添加横幅以在 React/HTML 中关闭它？

Question

Here is my mock-up.我在我正在处理的网站上使用 React，我只想为网站上呈现的每个图像添加一个横幅(可关闭)。我是 css 的新手，所以我不确定要使用什么类，或者我是否必须自己制作，或者人们通常如何在 css 上实现这种模型。

背景信息:我这样做是因为我想让视障人士更容易访问该网站。所以描述基本上将存储为图像的替代文本。

用户将上传图片，因此他们需要能够自己为图片添加替代文本，而不是编码员。所以我想为 UI 实现某种机制来接受每个图像的输入，输入是图像描述。问题是我不确定如何编写代码。我需要一些帮助，何时何地开始。

Answer 1

可以在此处找到 ReactJS API - https://facebook.github.io/react/ (请参阅应用程序 示例)有一个示例，您可以在其中动态地向页面添加文本。我会推荐使用相同的概念。您必须逐步分解流程。

第 1 步:声明一个变量，该变量将在用户输入(键入/粘贴)任何内容时捕获文本字段中的内容。

第 2 步:当用户按下“添加”时，使用存储的名称调用该变量并将其应用为 alt图片的属性。

第 3 步:使用 jQuery 添加一个 <div>位于图像底部并且与 alt 具有相同的值图片的属性。

如果您需要实际代码，请告诉我。