如何在元件上添加onClick

Question

I am using https://github.com/winhtaikaung/react-tiny-link for displaying some posts from other blogs. I am able to get the previews correctly. I want to capture the views count through onClick() but this module(react-tiny-link) doesn't seems to support the same, please help.

<ReactTinyLink
cardSize="large"
showGraphic={true}
maxLine={0}
minLine={0}
header={""}
description={""}
url={url}
onClick={() => this.handleViewCount(id)} />

I tried adding div around the component but it affects the css.

Answer 1

You can wrap your link with a div and attach your onClick callback on that div instead.

<div onClick={() => this.handleViewCount(id)}>
  <ReactTinyLink
    cardSize="large"
    showGraphic={true}
    maxLine={0}
    minLine={0}
    header={""}
    description={""}
    url={url}
  />
</div>

Answer 2

---

Your library - ReactTinyLink does not support onClick attribute. Since you've tagged javascript - I can give you a small JS hack for the same.

Run the following code at the end of your React Rendering

var cards = document.getElementsByClassName('react_tinylink_card');
linksClicked = [];

for(var i = 0; i<cards.length; i++){
    cards[i].onclick = function(){
        linksClicked.push(this.href);
    }
}

The above code will go through each and every cards and will attach onClick handlers on them, once clicked - the 'this' object will be your anchor tag's element, so I am storing it's href.(you're free to store anything you want)

In the following example - https://winhtaikaung.github.io/react-tiny-link/ I tried the same snippet - and got the following result

Hope this would be a good starting point for what you're trying to achieve.