javascript - 在 Reactjs 中将 Stripe 支付按钮更改为图像

Question

我正在我的应用程序中实现 Payment with Strip，我想使用图像来触发 Stripe “Pay with Card”按钮。我试图隐藏但我不知道使用图像在 reactjs 中触发它。任何对此的提醒将不胜感激

Answer 1

在 React 中，我们需要使用 event handlers处理诸如点击事件之类的事情。 对于您的示例，您需要为图像设置一个 onClick 处理程序。

...

handleClick = event => {
  this.setState({
    hideButton: !hideButton
  })
}

render() {
  return (
    <div>

      <img 
        src="example.com"
        alt="example of an example"
        onClick={this.handleClick}
      />

      <StripeButton 
        style={ hideButton ? {visibility:'hidden'} : {visibility:'visible'} }
      />

    </div>
  )
}

...

使用 this.setState({hideButton: !hideButton}) 每次用户单击图像时按钮都会切换。如果您不想要它，请将其替换为:this.setState({hideButton: false})。