将事件侦听器添加到通过API-REST检索的html代码中



我目前正在学习React JS。

在我正在做的项目中,我使用Axios从API检索HTML内容。以下是我正在检索的HTML代码示例:

<p>Lorem ipsum <a href="#" class="hover-link" data-background="https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png">amset doleres</a>, consectetur adipiscing elit. Ut tempor, nunc at tempus luctus, risus urna consequat eros, vel feugiat enim erat sed odio. Nulla purus ante, suscipit sed est non, lacinia ornare orci. In congue semper fermentum. Ut lacinia, <a href="#" class="hover-link" data-background="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/250px-Image_created_with_a_mobile_phone.png">neque bibendum convallis</a> ornare, turpis lorem interdum augue, in fermentum erat quam non nibh. Proin arcu elit, hendrerit sed felis ut, elementum vulputate metus. Curabitur sed <a href="#" class="hover-link" data-background="https://d1fmx1rbmqrxrr.cloudfront.net/cnet/optim/i/edit/2019/04/eso1644bsmall__w770.jpg">ipsum scelerisque</a>, pellentesque leo ac, dignissim erat. Duis non urna eleifend, maximus justo feugiat, consequat risus.</p>

我想在所有链接上添加事件侦听器,以便以后在后台检索数据。我已经在VanillaJS中制作了一个代码,它运行得很好(见这里(。。。但我不能让它在React中工作,因为我不知道如何操作从API-REST检索到的HTML代码(添加click/mouseover/mouseout/…(

我被告知要使用Ref…但我不明白它对我有什么帮助。

你有什么想法吗?

提前,谢谢。

根据您的信息,我终于做到了我想做的事。

我在这里分享一个CodeSandbox链接:https://codesandbox.io/s/reponse-question-15420864-udemy-cours-react-h2prog-nmbfr?file=/src/App.js对于那些可能感兴趣的人!

请注意,这不是最佳解决方案。。。但它是有效的。看来Hooks和/或Ref会更可取。我将尝试使用这两种解决方案中的一种来改进代码。

如果你有任何问题,请毫不犹豫地问。

附言:非常感谢Grafikart Discord上的@Ky对我的帮助。

A+

最新更新