恢复阻止表单在React中提交

Question

我正在使用React实施Stripe。

在提交点击后，表单提交被阻止，并且ajax请求转到Stripe--给我们一个响应中的令牌，该响应应该在随后的请求中附加到我们的服务器中。

我绊倒如何实现/触发此后续请求到我们的服务器？

下面是从react-stripe-elements库采取了这一流程的一个例子：

class _CardForm extends React.Component { 
    props: { 
    fontSize: string, 
    stripe: StripeProps, 
    } 
    handleSubmit = (ev) => { 
    ev.preventDefault(); 
    this.props.stripe.createToken().then((payload) => console.log(payload)); 
    } 
    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <label> 
      Card details 
      <CardElement 
      onChange={handleChange} 
      onFocus={handleFocus} 
      onBlur={handleBlur} 
      onReady={handleReady} 
      {...createOptions(this.props.fontSize)} 
      /> 
     </label> 
     <button>Pay</button> 
     </form> 
    ); 
    } 
} 
const CardForm = injectStripe(_CardForm); 

Answer 1

您应该触发您的服务器调用，一旦你得到你的道理，即承诺的then条款在this.props.stripe.createToken回报。

handleSubmit = (ev) => { 
    ev.preventDefault(); 
    this.props.stripe.createToken() 
    .then((payload) => yourFetchImplementation('path/to/api/endpoint', payloadAsBody)); 
}