恢复阻止了 React 中的表单提交

Question

我正在用 React 实现 Stripe。

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

我正在纠结如何implement/trigger向我们的服务器发出后续请求？

下面是从 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

您应该在获得令牌后触发对服务器的调用，即在 this.props.stripe.createToken returns 承诺的 then 子句中。

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

恢复阻止了 React 中的表单提交

Resume prevented form submission in React

javascript

form-submit

stripe-payments

reactjs