创建一个填充React的按钮

Question

我是新来的，我有一个我找不到答案的问题。。

我目前正在使用ReactJS在网站上工作，我希望有一个按钮可以在用户单击它时自动填充。该按钮总共应该包含5个阶段。

我不是要您为我编写代码，而只是帮助我找到解决此问题的最佳方法。

所以我到底在问什么？如您所见，在此>>

这是一个带框的元素，每当用户单击它时（它可以单击整个元素），进度就会填充，并且变成类似这样的内容

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9UaktDMi5wbmcifQ==” alt =“类似的东西”>

因此，现在标记了第一行。当用户再次按下它时，第二个栏将填充

重要-这些栏中将填满文本。

[到目前为止我做了什么？

我一直在考虑每次用户按元素时都具有5张不同的图像，但是我想知道是否有更好的方法（就像让DIV背景图像一样，每当用户按下...时，子div就会填满...）

我希望我能说清楚，谢谢大家的时间！

我是新来的，有一个我找不到答案的问题。.我目前正在使用ReactJS在网站上工作，我希望有一个按钮可以在用户单击它时自动填充。 ...

Answer 1

您正在使用react。使用创建步骤/级别作为组件，您将传递样式道具。您可以根据需要将该组件映射5次或n次。您显示的视图不需要图像，可以使用CSS来实现。

Answer 2

他们的关键概念是国家。当您单击按钮时，应设置一些状态，并且在渲染按钮时，应基于状态进行渲染。