javascript - 简历阻止了 React 中的表单提交

Question

我正在使用 React 实现 Stripe。

单击“提交”后，表单提交将被阻止，并且 ajax 请求将发送至 Stripe - 在响应中为我们提供一个 token ，该 token 应附加在对我们服务器的后续请求中。

我不知道如何向我们的服务器实现/触发此后续请求？

下面是此流程的示例，取自 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

一旦获得 token ，即在 this.props.stripe.createToken 返回的 promise 的 then 子句中，您应该触发对服务器的调用。

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