Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I handle an event to open a window in react js?

I want to open a window after clicking the fshare:

My render() return is like this

<Modal.Footer>
    <img src="/static/img/fshare.png" onClick={this.fbShare} />
    <Button onClick={this.hide}>Close</Button>
</Modal.Footer>

I am creating a function

fbShare: function(event) {

},

And I want to add the following code inside the function that basically opens a new window to share in Facebook:

window.open('https://www.facebook.com/dialog/feed?app_id=xxxxxxxxe='sharer', 'toolbar=0,status=0,width=548,height=325');" target="_parent" href="javascript: void(0)">

But I am confused with how to handle this event.

like image 398
Sijan Shrestha Avatar asked Dec 29 '15 08:12

Sijan Shrestha


People also ask

How do I add an event listener to a window in React?

To use the addEventListener method in function components in React: Set the ref prop on the element. Use the current property on the ref to get access to the element. Add the event listener in the useEffect hook.

How do you trigger an event in React?

To add the click event in React using plain JavaScript, you need to use addEventListener() to assign the click event to an element. Create one <button> element as ref props so that it can be accessed to trigger the click event.


1 Answers

You are on the right way!

Is it something you need? I prepared the example: click here

var Example = React.createClass({
    fbShare: function() {
        window.open('http://www.facebook.com/sharer.php?s=100&p[title]=Fb Share&p[summary]=Facebook share popup&p[url]=javascript:fbShare("http://jsfiddle.net/stichoza/EYxTJ/")&p[images][0]="http://goo.gl/dS52U"', 'sharer', 'toolbar=0,status=0,width=548,height=325');
    },

    render: function() {
        return (<div>
            <img src="http://pasadenainstitute.com/fb-shareTransp122x42.png" onClick={this.fbShare} />
        </div>);
    }
});

ReactDOM.render(
    <Example />,
    document.getElementById('container')
);
like image 117
Anastasia Abakumova Avatar answered Oct 03 '22 19:10

Anastasia Abakumova