创建自定义表单时,提交时您需要将表单发送到服务器。这对于 DOM 选择器来说非常简单。这里:
var $form = $('#payment-form');
Stripe.createToken($form, this.stripe_response_handler);
然而,在使用 React 时不应直接尝试修改或访问 DOM。为了克服这个问题,我使用了 ref
。这里:
<Form onSubmit={this.select_plan} ref={(ref) => this.paymentForm = ref} >
...
</Form>
然后
Stripe.createToken(this.paymentForm, this.stripe_response_handler);
但是这导致了错误:
Uncaught TypeError: Converting circular structure to JSON
在 React 中执行此操作的正确方法是什么?
最佳答案
有几种方法可以使用 Stripe.js
,你可以传递表单 DOMElement
(你不需要使用 ref
,因为您可以在 onSubmit
事件中从 e.target
获取表单元素)其中有 Stripe
var StripeComponent = React.createClass({
componentDidMount: function () {
Stripe.setPublishableKey(); // set your test public key
},
handleSubmit: function (e) {
e.preventDefault();
Stripe.card.createToken(e.currentTarget, function (status, response) {
console.log( status, response );
});
},
render: function() {
return <form method="post" onSubmit={ this.handleSubmit }>
<input size="20" data-stripe="number" placeholder="number"/>
<input size="4" data-stripe="cvc" placeholder="cvc" />
<input size="2" data-stripe="exp-month" placeholder="exp-month" />
<input size="4" data-stripe="exp-year" placeholder="exp-year" />
<button type="submit">Pay</button>
</form>;
}
});
或者您可以像这样创建自定义数据对象
var StripeComponent = React.createClass({
getInitialState: function () {
return {
card: {
number: '',
cvc: '',
exp_month: '',
exp_year: ''
}
}
},
componentDidMount: function () {
Stripe.setPublishableKey(); // set your test public key
},
handleSubmit: function (e) {
e.preventDefault();
Stripe.createToken(this.state.card, function (status, response) {
console.log( status, response );
});
},
handleChange: function (e) {
let card = this.state.card;
card[e.target.name] = e.target.value
this.setState(card);
},
render: function() {
return <form onSubmit={ this.handleSubmit }>
<input size="20" name="number" onChange={this.handleChange} />
<input size="4" name="cvc" onChange={this.handleChange} />
<input size="2" name="exp_month" onChange={this.handleChange} />
<input size="4" name="exp_year" onChange={this.handleChange} />
<button type="submit">Pay</button>
</form>
}
});
注意 - 要测试示例,您需要设置公钥
关于javascript - 使用 Reactjs Stripe 自定义表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34328844/