使用Reactjs創建條紋自定義表格

Question

創建自定義表單時，在提交時需要將表單發送到服務器。這對於DOM選擇器來說非常簡單。這裏：

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

但是，使用React時不應該直接嘗試修改或訪問DOM。爲了克服這個問題，我使用了ref。在這裏：

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

然後

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

然而，這導致了錯誤：

Uncaught TypeError: Converting circular structure to JSON

什麼是這樣做在陣營的正確方法？

Answer 1

有幾種方法，你可以如何使用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 <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

，或者你可以創建自定義的數據對象這樣

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> 
    } 
}); 

Example

注意 - 要測試的例子，你需要設置公共密鑰