[英]Reactjs Passing props down 2 components
In my project I have a payment form which conditionally renders 2 Stripe elements (PaymentRequestForm.js & CheckoutForm.js), I have passed the Props down from the main form component FullfillRequest.js to PaymentRequestForm.js, however I'm struggling with passing the same props down to CheckoutForm.js.在我的项目中,我有一个支付表单,它有条件地呈现 2 个 Stripe 元素(PaymentRequestForm.js 和 CheckoutForm.js),我已经将道具从主表单组件 FullfillRequest.js 传递到 PaymentRequestForm.js,但是我正在努力传递CheckoutForm.js 的相同道具。 The function of the props is to enable submit of the form upon Stripe payment is completion.
道具的 function 是为了在 Stripe 支付完成后提交表单。
With the current set-up, the error is this.props.setComplete() is undefined in CheckoutForm.js.使用当前设置,错误是 this.props.setComplete() 在 CheckoutForm.js 中未定义。
FulfillRequest.js完成请求.js
setComplete = val => {
this.setState({
complete: val
});
};
render() {
return <PaymentRequestForm
setComplete={this.setComplete}
complete={this.state.complete}
requestId={this.props.requestId}
/>
<Button disabled={loading || !this.state.complete} >
Fulfill Request
</Button>
}
PaymentRequestForm.js PaymentRequestForm.js
class PaymentRequestForm extends React.Component {
constructor(props) {
super(props);
paymentRequest.on("token", async ev => {
const response = await fetch();
if (response.ok) {
this.props.setComplete(true);
}
});
this.state = {
canMakePayment: false,
paymentRequest,
complete: false
};
}
render() {
if (this.props.complete) return <h1>Purchase Complete</h1>;
return this.state.canMakePayment ? (
<PaymentRequestButtonElement />
) : (
<CheckoutForm
setComplete={this.setComplete}
complete={this.state.complete}
requestId={this.props.requestId}
/>
);
CheckoutForm.js CheckoutForm.js
class CheckoutForm extends Component {
constructor(props) {
super(props);
this.state = { complete: false };
this.submit = this.submit.bind(this);
}
async submit(ev) {
let response = await fetch();
if (response.ok) {
this.props.setComplete(true);
}
}
render() {
if (this.props.complete) return <h1>Purchase Complete</h1>;
return (
<Button onClick={this.submit}>
Send
</Button>
);
}
}
Any help will be greatly appreciated, thanks!任何帮助将不胜感激,谢谢!
Inside PaymentRequstForm
setComplete
is accessible via this.props.setComplete
not this.setComplete
(cause it's coming from FulfillRequest
) setComplete
内部PaymentRequstForm
可通过this.props.setComplete
而不是this.setComplete
访问(因为它来自FulfillRequest
)
render() {
if (this.props.complete) return <h1>Purchase Complete</h1>;
return this.state.canMakePayment ? (
<PaymentRequestButtonElement />
) : (
<CheckoutForm
setComplete={this.props.setComplete}
complete={this.state.complete}
requestId={this.props.requestId}
/>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.