第三方向我发送了此脚本。基本上，
这是一种将其与反应整合在一起的方法吗？我想我需要来自onAuthorize的数据来更新我的反应状态
<!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 中
onAuthorize: function (data) {
// Dispatch event
document.dispatchEvent(event, data);
}
另一个快速而肮脏的修复程序。
从反应组件公开功能超出反应范围。
window.setAuthorizeState = (data)=> {
this.setState({authorizeState: data});
}
从
setAuthorizeState调用onAuthorize关于javascript - 如何在 react 中使用外部对象？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53255844/