如何在 React 中使用 Stripe JS 触发函数？

Question

我正在努力将 Stripe 集成到我的 React 构建中。我遵循了我所理解的表单提交/标记化最佳实践的语法，一旦浏览器到达 self.stripeHandler() 我就收到一个错误我的控制台。

当不在 React 中构建而是使用 jQuery 时，stripeResponseHandler 函数作为参数包含在 Stripe.card.createToken 函数并触发 stripeResponseHandler 函数，没有任何问题。

现在，我在调整 Stripe 文档以适应 React 时遇到了问题。有任何想法吗？

我正在使用 webpack 来组合构建。那会是问题吗？

import React from 'react';
import jQuery from 'jquery';

export default class PurchaseForm extends React.Component {

    submitFormHandler(e) {

      e.preventDefault();

      var $form = $('#payment-form');

      const self = this;

      $form.submit(function(event, self) {

        // Request a token from Stripe:
        Stripe.card.createToken({
          number: $('.card-number').val(),
          cvc: $('.card-cvc').val(),
          exp_month: $('.card-expiry-month').val(),
          exp_year: $('.card-expiry-year').val()
        }, self.stripeResponseHandler()); // Uncaught TypeError: Cannot read property 'stripeResponseHandler' of undefined

        return false;
      });

    };

    stripeResponseHandler(){

      console.log("stripeResponseHandler fired");

    };

  render(){
    return(
      <div>
        <form onSubmit={this.submitFormHandler.bind(this}>.....</form>
      </div>
    );  
  }
};

感谢您提供的任何帮助。萌

Answer 1

你应该避免使用老派的 self，它很乱。 React 完全是关于函数式方法的，像这样玩弄上下文是个坏主意。

我推荐的是在构造函数中绑定您的函数。检查：

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

此外，我非常确定您应该传递对 stripeResponseHandler 函数的引用，而不是调用它。

如何在 React 中使用 Stripe JS 触发函数？

How do I fire a function with Stripe JS in React?

jquery

stripe-payments

reactjs

webpack