Interacting with ReactJS Component from javascript/jquery

Question

I have a web application written in classic HTML/CSS/jQuery. I am writing a chat overlay (similar to the Facebook chat overlay) which needs to be highly interactive. I initially wrote this using Vue, but I decided to try re-writing it using React for learning purposes and I'm stuck at one particular part.

I have a component called ChatOverlay, which handles all of the conversations that should be displayed on the page. I render this ChatOverlay in a div with id='chat-footer', which is just a fixed element overlaying the page.

const element = <ChatOverlay name="Testing" conversationId="a6b9bc89-b9ff-4eb1-86d8-ac5986fb5cbe"/>;
ReactDOM.render(
    element,
    document.getElementById('chat-footer')
);

However, I'm not sure how to interact with the React components from outside the react "environment". For example, I may have a button on the a user's profile which says "chat". For example, consider the following jquery click event handler:

$('.chat-button').on('click', function(){
   //I need to tell the react app to open another conversation  
});

With Vue, in the click handler, I could easily call a Vue function which can perform some actions in Vue's "environment", however I'm not sure how to achieve the same thing in React. Any advice would be much appreciated.

Brad · Accepted Answer · 2017-11-23 21:25:55Z

1

I was able to solve this by doing the following. I realized the ReactDOM.render actually returns an instance of the ChatOverlay component which I can then access from anywhere else in my JS code. I'm not sure if this is the best way to achieve this, but it seems to work for me.

const element = <ChatOverlay />;
let chatOverlay = ReactDOM.render(
    element,
    document.getElementById('chat-footer')
);

$('.chat-button').on('click', function(){
   chatOverlay.openChat()
});

answered Nov 23, 2017 at 21:25

Brad

10.9k18 gold badges63 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shammoo · Accepted Answer · 2017-11-23 19:47:13Z

0

ReactJs is descriptive and explicit about what and how things work. To set an action on a button, the action should be set when you define the button, not somewhere else in the program.

<button className='chat-button' onClick={()=>{
    //I need to tell the react app to open another conversation
    props.openAnotherConversation()
} value='Open Convo' />

You can also use ref={(node)=>{this.buttonRef=node}} if you have a need to do HTMLDom like references to the button as a HTML object.

edited Nov 23, 2017 at 19:47

answered Nov 23, 2017 at 19:39

Shammoo

1,10310 silver badges23 bronze badges

1 Comment

Brad Over a year ago

My button is not rendered by react, so that syntax does not work. The button is completely separate on the page. As I mentioned 90% of the page is classic HTML/jQuery, its just the chat overlay that is using react. I found a solution which I have posted

Cro · Accepted Answer · 2017-11-23 20:04:11Z

0

I'm pretty new to React too. I think you use the onClick property to call the function. Something like this. I may be misunderstanding your question though, and I may just be flat out wrong. Either way, Happy Thanksgiving.

import React, { Component } from 'react'

class CHAT-OVERLAY extends Component {



    const myFunction = (event) => {
        // your function stuff
    }

    render(){
        return(
            <button 
                className='chat-button' 
                onClick={this.myFunction}
            > Chat Button 
            </ button>
        )
    }
}

export default CHAT-OVERLAY

edited Nov 23, 2017 at 20:04

answered Nov 23, 2017 at 19:58

Cro

133 bronze badges

Collectives™ on Stack Overflow

Interacting with ReactJS Component from javascript/jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related