Question

创建自定义表单时，在提交时您需要将表单发送到服务器。 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);

但是这导致了错误：

未捕获的TypeError：将循环结构转换为JSON

在React中执行此操作的正确方法是什么？

Answer 1

有几种方法可以使用Stripe.js，您可以传递表单DOMElement（并且您不需要使用ref，因为您可以从{获取表单元素在e.target事件中{1}}，其中有onSubmit

的数据属性

Stripe

Example

或者您可以像这样创建自定义数据对象

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>;
  }
});

Example

注意 - 要测试示例，您需要设置公钥

使用Reactjs条带自定义表单

1 个答案: