How to pass a ReactJS function as a callback to a external JS function?

Question

I am implementing a credit card payment form in ReactJS using a 3rd party bank JS which works using iframes.

The logic is I load bank's javascript in my page, something like this:

<script src="https://my-bank.com/super-secure-script.js"></script>

Then I collect user's CC data in my ReactJS component, then call a function like this:

window.Bank.SendPayment(CC, this.paymentCompletedCallback);

 ...

paymentCompletedCallback = (result) => {
  // process payment result here, inside my component
}

The problem is: the code inside super-secure-script.js cannot find the callback this.paymentCompletedCallback, because it is inside inside my component.

The question is: how can I pass to an external script a reference to a react object function?

I suppose Sendpayment is async ? Maybe this.paymentCompletedCallback.bind(this) solves the problem. — Ruckert Solutions
– Ruckert Solutions, Commented Sep 12, 2019 at 13:41
@Lumpenstein, using an arrow function automatically binds this in scope — Claeusdev
– Claeusdev, Commented Sep 12, 2019 at 13:43
@Claeusdev automatic this binding for fat arrow is a misconception (I believe), it dont have its own this thus bubbles up to use parent's this which in case of async gets lost and undefined most likely. — Rikin
– Rikin, Commented Sep 12, 2019 at 13:44
@MarcoS I tried creating tiny example of async and it seems working: stackblitz.com/edit/… — Rikin
– Rikin, Commented Sep 12, 2019 at 13:58
Thanks, everybody! I suppose the bind did the trick! I did never really understood that bind thing, sorry for wasting your time! If @Lumpenstein want to post his first comment a an answer, I will accept it... Many thanks to @Rikin, too! — MarcoS
– MarcoS, Commented Sep 12, 2019 at 14:13

sigmus · Accepted Answer · 2019-09-12 15:28:21Z

2

You can attach the function to the window object:

const Component = () => {

  const func = () => {
    console.log('do something');
  };

  window.func = func;
};

answered Sep 12, 2019 at 15:28

sigmus

3,2473 gold badges25 silver badges31 bronze badges

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

2 Comments

MarcoS Over a year ago

I think this simple solution should work, too... Didn't thing about it... :-( But the bind looks more like a react-thing... :-)

JonShipman Over a year ago

Bind is a JavaScript prototype. In the React Component world, if you organize your components into classes and need to change the state prop from a callback, you just bind your function to this.

funA() {    window._reactLoadingCB = this.ready.bind(this); }  ready() {    const { result } = this.state;    console.log('if you have result set, this will work', result); }

Ruckert Solutions · Accepted Answer · 2019-09-13 06:09:10Z

1

this.paymentCompletedCallback.bind(this) may solve the problem.

Here is another example of when binding is necessary, hope that makes it more clear to you:

var Button = function(content) { 
  this.content = content;
};
Button.prototype.click = function() {
  console.log(this.content + ' clicked');
};

var myButton = new Button('OK');
myButton.click();

var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the global object

var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton

answered Sep 13, 2019 at 6:09

Ruckert Solutions

1,3011 gold badge10 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to pass a ReactJS function as a callback to a external JS function?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related