Stripe JSの関数をReactで起動するにはどうすればよいですか？

Question

私はReactビルドにStripeを統合しようとしています。 私はフォーム提出/トークン化のベストプラクティスであると理解し、ブラウザがに到着すると直ちに構文をたどりました。self.stripeHandler（）私のコンソールにエラーが発生しました。反応し、その代わりにjQueryを使用して構築しない場合

、stripeResponseHandler機能Stripe.card.createToken関数にパラメータとして含まれ、問題なくstripeResponseHandler機能を起動します。

現在、ストライプのドキュメントをReactに適合させるのに問題があります。何か案は？

ビルドにcomponentsを使用するために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

あなたは古い学校の自己を使わないでください。それは面倒です。リアクションは機能的なアプローチに関するもので、そのようなコンテキストで遊ぶことは悪い考えです。

あなたの関数をコンストラクタにバインドすることをお勧めします。チェック：

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

はまた、私はあなたがそれを起動しない、stripeResponseHandler関数への参照を渡す必要があることをかなり確信しています。