Question

我已在_CardForm组件中设置了Stripe元素付款表单，并希望在Checkout组件中执行付款流程，该组件是_CardForm的父组件。

但是，我无法从_CardForm组件中获取条带数据。如何从子组件获取条带数据？

const {
  CardElement,
  StripeProvider,
  Elements,
  injectStripe,
} = ReactStripeElements

class _CardForm extends React.Component {
  render() {
    return (
      <form onSubmit={this.props.userPay}>
        <CardElement />
        <button>Pay</button>
      </form>
    )
  }
}
const CardForm = injectStripe(_CardForm)

class Checkout extends React.Component {
  userPay(){
    // PROBLEM: Can't get stripe data from <CardElement />
    console.log(this.props.stripe) // undefined
    this.props.stripe.createToken().then(payload => console.log(payload))
  }
  render() {
    return (
      <div className="Checkout">
        <h1>Available Elements</h1>
        <Elements>
          <CardForm userPay={this.userPay.bind(this)} />
        </Elements>
      </div>
    )
  }
}

const App = () => {
  return (
    <StripeProvider apiKey="pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ">
      <Checkout />
    </StripeProvider>
  )
}
ReactDOM.render(<App />, document.querySelector('.App'))

Answer 1

这段代码对我来说很难测试，但它应该清除一些未在文档中显示的内容。

此外，毫无疑问，您必须首先正确加载Stripe。我也可以在该领域给出一些指示，但我需要了解更多关于你如何加载它的信息。

Encoding.UTF8

Stripe Elements React - 如何从父组件获取条带数据？

1 个答案: