Reactjs 如何从HOC重新输入子级的值

我想有一个按钮提交条纹的具体数量，根据输入，可以通过键入或单击增量/减少按钮更改。我在高阶组件上具有递增/递减功能，但我无法将其提交到stripe按钮（据我所知为child）

相关代码如下：

withCheckout（HOC）：

从“React”导入React
常量UpdatedComponent=（原始组件）=>{
类NewcomComponent扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
计数：1
}
this.handleChange=this.handleChange.bind（this）
}
增量=（）=>{
this.setState（prevState=>{
返回{count:prevState.count+1}
})
}
减少=（）=>{
this.setState（prevState=>{
返回{count:prevState.count-1}
})
}
手变（活动）{
这是我的国家({
计数：parseInt（event.target.value）
});
}
render（）{
返回
}
}
返回新组件
}
导出默认更新组件

结帐：

import React，{useState}来自“React”
从“@stripe/stripe js”导入{loadStripe}
从“/withCheckout”导入更新的组件
常量按钮样式={
字体大小：“13px”，
textAlign：“居中”，
颜色：“000”，
填充：“12px 60px”，
盒形阴影：“2px 5px 10px rgba（0,0,0,1）”，
背景色：“rgb（255、178、56）”，
边界半径：“6px”，
字母间距：“0.2ch”，
显示：“块”，
页边空白：“1.5em自动1.5em自动”，
}
常量按钮禁用样式={
不透明度：“0.5”，
光标：“不允许”，
}
让脱衣舞表演
常量getStripe=（）=>{
如果（！stripePromise）{
stripePromise=loadStripe（“此处的键”）
}
返回条程序
}
const Checkout=props=>{
常量[loading，setLoading]=useState（false）
const redirectToCheckout=异步事件=>{
event.preventDefault（）
设置加载（真）
const stripe=await getStripe（）
const{error}=wait stripe.redirectToCheckout({
方式：“付款”，
行项目：[{price:“price\u ID\u HERE”，数量：props.count}]，
成功URL:`http://localhost:8000/page-2/`,
取消URL:`http://localhost:8000/`,
收货地址：{
允许的国家：['PT']，
}
})
如果（错误）{
console.warn（“错误：”，错误）
设置加载（错误）
}
}
返回(
compar{props.count}
)
}
导出默认的UpdatedComponent（签出）

例如：

---

当我将输入更改为7时，我希望按钮文本为“Compar7”，并且我希望在StripeDirect函数中提交数量：7。我认为问题与设置道具的方式有关，因为我的计数器工作正常，道具被传递为

const{count}=this.props

。我是否也应该添加Counter.js代码？

不清楚您在问什么。你提到不能做你想做的事，但是你没有包括一个错误。您提供的代码似乎处理样式和条带，但它们似乎与您描述的问题并不密切相关。请您编辑您的问题，以关注您的问题或问题？我的问题是“如何使条纹数量等于计数值？”。它总是提交数量：1，尽管输入框上有值。有没有办法在没有密钥的情况下共享“工作”代码？我没有得到一个错误，它根本不工作。谢谢。提交到Stripe的数量看起来像是作为

道具.计数传递到
结帐
，但是您没有共享渲染的位置
。我可能有这个错误。我想提交输入字段的值，而不是相反。看到这个了吗
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,0,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)