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

【问题标题】：How do I fire a function with Stripe JS in React?如何在 React 中使用 Stripe JS 触发函数？
【发布时间】：2016-12-07 06:51:31
【问题描述】：

我正在努力将 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>
    );  
  }
};

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

【问题讨论】：

标签： jquery reactjs webpack stripe-payments

【解决方案1】：

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

我建议在构造函数中绑定你的函数。检查：

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

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

【讨论】：