Reactjs ile özel form formu

Question

Özel form oluştururken, gönderim sırasında formu sunucuya göndermeniz gerekir. Bu DOM seçiciler ile oldukça basit. Burada: React'i kullanırken doğrudan bir DOM modifiye etmeye çalışmamalı veya erişmemelidir. Bunu aşmak için ref kullandım. İşte:

<Form onSubmit={this.select_plan} ref={(ref) => this.paymentForm = ref} > 
... 
</Form> 

ve sonra

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

Ancak bu hata ile sonuçlandı:

Uncaught TypeError: Converting circular structure to JSON

bu reaksiyon göster yapmanın doğru yolu nedir?

Answer 1

veri yoktur sen, formu DOMElement geçebilir Stripe.js kullanabilirsiniz (ve onSubmit olay e.target form öğesi alabilirsiniz, çünkü kullanımı ref gerekmez) nasıl birkaç yolu vardır Stripe

için öznitelikleri vardır

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

veya oluşturabileceğiniz özel veri bu

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 <form onSubmit={ this.handleSubmit }> 
     <input size="20" name="number" onChange={this.handleChange} /> 
     <input size="4" name="cvc" onChange={this.handleChange} /> 
     <input size="2" name="exp_month" onChange={this.handleChange} /> 
     <input size="4" name="exp_year" onChange={this.handleChange} /> 
     <button type="submit">Pay</button> 
    </form> 
    } 
}); 

gibi nesne

Example

Not-Eğer genel anahtar set gerek örneklerini test etmek için