使用Reactjs条带自定义表单

在创建自定义表单时,在提交时您需要将表单发送到服务器.DOM选择器非常简单.这里:

var $form = $('#payment-form');
Stripe.createToken($form, this.stripe_response_handler);

但是,在使用React时,不应该直接尝试修改或访问DOM.为了克服这一点,我用了ref.这里:

 this.paymentForm = ref} >
...

然后

Stripe.createToken(this.paymentForm, this.stripe_response_handler);

但是这导致了错误:

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

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

有几种方法,你可以如何使用Stripe.js,你可以通过表单DOMElement(你不需要使用ref的,因为你可以从表单元素e.target在onSubmit事件),那里有数据属性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 

      
      
      
      
      Pay
    
;
  }
});

Example

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

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 

      
      
      
      
      Pay
    
  }
});

Example

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