How to use "this" of a React Component from outside?

Sometime we must use "this" of a React Component from outsize, for example inside another function.
Consider my example by steps below:

Step 1 Create a function outside of your React Component that use want to use: 
 function funx(functionEvents, params) {
  console.log("events of funx function: ", functionEvents);
  console.log("this of component: ", this);
  console.log("params: ", params);
  //To fix the Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `isDefaultPrevented` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.
  thisFunction.persist();
}


Step 2 Bind it inside the React component: 
 constructor(props) {
    super(props);
    this.state = {};
    this.funxBinded = funx.bind(this);
  }
}


Step 3 Use it in your React component:


Complete code:


javascriptreact

Latest

C

Create a Caro pattern background with HTML and CSS

C

Create three columns layout with the same width and height use CSS flexbox

S

Show pretty git log graphs in command line

S

Select only Odd or Even elements by CSS

H

How to run a npm script before run build in package.json ?

A

Auto redirect to another web page with Javascript

Related

R

Run function or script only once inside useEffect React

H

How to add Google Analytics to the React App?

H

How to add Google AdSense to your React application?

M

Make a React custom scrollbar component

R

Render the HTML raw in React app

© 2019 4codev

Created with love by Sil.