问题描述
我希望有一个按钮可以提交以划分特定数量,该输入基于可通过键入或单击增加/减少按钮来更改的输入。我在高阶组件上具有递增/递减功能,但无法将其提交到条纹按钮(据我所知为子项)
以下相关代码:
withCheckout(HOC):
import React from "react"
const UpdatedComponent = (OriginalComponent) => {
class NewComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 1
}
this.handleChange = this.handleChange.bind(this)
}
increment = () => {
this.setState(prevstate => {
return { count: prevstate.count + 1}
})
}
decrease = () => {
this.setState(prevstate => {
return { count: prevstate.count - 1 }
})
}
handleChange(event) {
this.setState({
count: parseInt(event.target.value)
});
}
render() {
return <OriginalComponent count={this.state.count} increment={this.increment} decrease={this.decrease} handleChange={this.handleChange} />
}
}
return NewComponent
}
export default UpdatedComponent
结帐:
import React,{ useState } from "react"
import { loadStripe } from "@stripe/stripe-js"
import UpdatedComponent from "./withCheckout"
const buttonStyles = {
fontSize: "13px",textAlign: "center",color: "#000",padding: "12px 60px",BoxShadow: "2px 5px 10px rgba(0,.1)",backgroundColor: "rgb(255,178,56)",borderRadius: "6px",letterSpacing: "0.2ch",display: "block",margin: "1.5em auto 1.5em auto",}
const buttondisabledStyles = {
opacity: "0.5",cursor: "not-allowed",}
let stripePromise
const getStripe = () => {
if (!stripePromise) {
stripePromise = loadStripe("KEY_HERE")
}
return stripePromise
}
const Checkout = props => {
const [loading,setLoading] = useState(false)
const redirecttocheckout = async event => {
event.preventDefault()
setLoading(true)
const stripe = await getStripe()
const { error } = await stripe.redirecttocheckout({
mode: "payment",lineItems: [{ price: "PRICE_ID_HERE",quantity: props.count }],successUrl: `http://localhost:8000/page-2/`,cancelUrl: `http://localhost:8000/`,shippingAddressCollection: {
allowedCountries: ['PT'],}
})
if (error) {
console.warn("Error:",error)
setLoading(false)
}
}
return (
<button
disabled={loading}
style={
loading ? { ...buttonStyles,...buttondisabledStyles } : buttonStyles
}
onClick={redirecttocheckout}
>
Comprar {props.count}
</button>
)
}
export default UpdatedComponent(Checkout)
示例: See this image
当我将输入更改为7时,我希望按钮文本为“ Comprar 7”,并希望在striperedirect函数中提交数量:7。我认为问题与设置道具的方式有关,因为我的柜台工作得很好,道具以const {count} = this.props
的形式传递。我还应该添加Counter.js代码吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)