第三方向我发送了这个脚本。基本上，
- 包含一个脚本
- 调用对象
- onAuthorize 会反馈数据，然后用数据做一些事情
是否可以将其与 React 集成？我想我需要来自 onAuthorize 的数据来更新我的 react 状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>Payment Gateway Test Page</title>
<script src="https://service.com/widget.js">
</script>
<style type="text/css">
iframe{border: 0;height: 50px;}
</style>
</head>
<body>
<div>
* Demo for widget
</div>
<br/>
<script>
// widget
mywidget.Button.render({
Client: {
id: "1234",
name: "testme"
},
payment: function (actions) {
var amountValue = parseFloat(document.getElementById("inp-amount").innerText);
return actions.createQuote(amountValue)
},
onAuthorize: function (data) {
// err
if (data.errorCode) {
this.onError(data);
return;
}
// money we need to pay
var amountValue = parseFloat(document.getElementById("inp-amount").innerText);
// we have such points, converted to money
var pointsDollars = parseFloat(data.pointsBurned * 0.005, 10);
// points to convert
document.getElementById('qp').innerText = data.pointsBurned;
// origPay - new_money = pay_now
document.getElementById('bal').innerText = '$' + (amountValue - pointsDollars);
},
onError: function (data) {
console.log(data);
},
onClicked: function (data) {
// on click
console.log(data);
}
}, "#container"); // container
</script>
<div id="container"></div>
<br/>
<div id="amount">
Checkout: $<span id="inp-amount">1543</span> <br>
Points to redeem: <span id="qp"></span> <br>
<hr>
Balance to pay: <span id="bal"></span> <br>
</div>
</body>
</html>
最佳答案
您可以创建一个事件并监听该事件。在 onAuthorize 中，您可以触发事件并传递数据。
在您的页面中添加一个事件(不一定是在 React 中)
// Create the event
var event = new CustomEvent("authroize-me", { "detail": "some event info" });
React 组件
constructor() {
super();
this.handleAuthroizeMe = this.handleAuthroizeMe.bind(this);
}
handleAuthroizeMe(data) {
console.log(data);
}
componentDidMount() {
document.addEventListener('authroize-me', this.handleAuthroizeMe);
}
componentWillUnmount() {
document.removeEventListener("authroize-me", this.handleAuthroizeMe);
}
在授权中
onAuthorize: function (data) {
// Dispatch event
document.dispatchEvent(event, data);
}
另一个快速而肮脏的修复。
在 react 范围之外公开 react 组件的函数。
window.setAuthorizeState = (data)=> {
this.setState({authorizeState: data});
}
从onAuthorize调用setAuthorizeState
关于javascript - 如何在 react 中使用外部对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53255844/