[英]How can I close the modal in parent according to the data from child?
I am opening two js files to import stripe function following the tutorial.我正在按照教程打开两个 js 文件来导入条带 function。 My stripe payment will appear in a modal.我的条带付款将出现在模式中。 How can I close the modal after I receive successful payment message in the child?孩子收到支付成功消息后如何关闭模态框?
The codes are as follow: Parent (some codes are eliminated for easy reading)代码如下: 父级(为了便于阅读,去掉了一些代码)
<Modal isOpen={modalPurchase} toggle={togglePurchase}>
<Stripe/>
</Modal>
The Child:孩子:
import React, { useState } from 'react'
import { Elements } from "@stripe/react-stripe-js"
import { loadStripe } from '@stripe/stripe-js'
import "./Stripe.css"
import PaymentForm from './PaymentForm'
const PUBLIC_KEY = "pk_test_"
const stripeTestPromise = loadStripe(PUBLIC_KEY)
const sendPaymentFormToStripe = () => {
setPaymentSuccess(true)
}
export default function Stripe() {
return (
<Elements stripe={stripeTestPromise} >
<PaymentForm />
</Elements>
)
};
Child of Stripe:条纹之子:
import React, { useState } from 'react'
import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
import * as axios from 'axios'
import { Button } from 'reactstrap'
import "./Stripe.css"
const CARD_OPTIONS = {
iconStyle: "solid",
style: {
base: {
iconColor: "#c4f0ff",
color:"fff",
fontWeight: 500,
fontSize: "16px",
fontSmoothing:"antialiased",
},
invaild: {
iconColor: "#ffc7ee",
color: "ffc7ee"
}
}
}
export default function PaymentForm() {
const [success, setSuccess] = useState(false)
const stripe = useStripe()
const elements = useElements()
const handleSubmit = async (e) => {
e.preventDefault()
const { error, paymentMethod } = await stripe.createPaymentMethod({
type: "card",
card: elements.getElement(CardElement)
})
if (!error) {
try {
const { id } = paymentMethod
const response = await axios.post('http://localhost:8080/checkout', {
amount: 500,
id
})
if (response.data.success) {
console.log('Successful payment')
setSuccess(true)
}
} catch (error) {
console.log('Error', error)
}
} else {
console.log(error.message)
}
}
return (
<div>
{!success ?
<form onSubmit={handleSubmit}>
<fieldset className="FormGroup">
<div className="FormRow">
<CardElement options={CARD_OPTIONS} />
</div>
</fieldset>
<Button>Pay</Button>
</form >
:
<div>
<h2>Successful</h2>
</div>
}
</div>
)
}
One way could be passing togglePurchase
function as props to Stripe
and PaymentForm
components.一种方法是将togglePurchase
function 作为道具传递给Stripe
和PaymentForm
组件。 So your code becomes:所以你的代码变成:
Parent:家长:
<Modal isOpen={modalPurchase} toggle={togglePurchase}>
<Stripe toggle={togglePurchase}/>
</Modal>
Stripe:条纹:
...
export default function Stripe(props) {
return (
<Elements stripe={stripeTestPromise} >
<PaymentForm toggle={props.toggle}/>
</Elements>
)
};
PaymentForm:付款方式:
...
export default function PaymentForm(props) {
...
const handleSubmit = async (e) => {
...
if (response.data.success) {
console.log('Successful payment')
setSuccess(true)
props.toggle() //<-- call toggle function
}
...
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.