Reactjs 如何根据用户输入的表单数据更改react中对象的值？

我正在使用react，并试图使用paypal按钮v2构建一个支付系统，需要让用户输入他们想向自己收费的金额。目前，处理此问题的代码如下所示：

export const Payment = () => {

let product = {
    price: 123,
    description: "Dues total payment: "
  };


  return (
    <Fragment>
      <div className="landing-inner">
        {paidFor ? (
          <div>
            <h1>You have successfully paid your dues</h1>
          </div>
        ) : (
            <div>
              <h1 className="x-large text-primary">
                {product.description} ${product.price}
              </h1>
              <div ref={v => (paypalRef = v)} />
            </div>
          )}
      </div>
    </Fragment>
  );
};

export default Payment;

export const Payment=（）=>{
设乘积={
价格：123，
说明：“应付款总额：”
};
返回(
{对吗(
你已经成功地支付了你的会费
) : (
{product.description}${product.price}
（paypalRef=v）}/>
)}
);
};
出口违约金；

product.price是允许用户更改的值，但它需要保留一个数字，以便处理付款的代码能够理解它

---

我是一个全新的反应者，一直在绞尽脑汁想如何让这些内容动态运行，但我正在努力使其正常运行，非常感谢任何帮助。

考虑使用像useState和useRef这样的钩子：

import React, { Fragment, useState, useRef } from "react";

export const Payment = () => {

  const [price, setPrice] = useState(123);
  const [paidFor] = useState(false);
  const priceRef = useRef(null);

  let product = {
    price,
    description: "Dues total payment: "
  };

  const onHandlePay = () => {
    setPrice(priceRef.current.value);
  };

  return (
    <Fragment>
      <div className="landing-inner">
        {paidFor ? (
          <div>
            <h1>You have successfully paid your dues</h1>
          </div>
        ) : (
            <div>
              <h1 className="x-large text-primary">
                {product.description} ${product.price}
              </h1>
              <div>
                 <input type="text" ref={priceRef} />
                 <button onClick={onHandlePay} type="button">
                   Pay
                 </button>
              </div>
            </div>
          )}
      </div>
    </Fragment>
  );
};

export default Payment;

import React，{Fragment，useState，useRef}来自“React”；
导出常量付款=（）=>{
const[price，setPrice]=useState（123）；
const[paidFor]=useState（false）；
const priceRef=useRef（空）；
设乘积={
价格，
说明：“应付款总额：”
};
const onHandlePay=（）=>{
设定价格（priceRef.当前值）；
};
返回(
{对吗(
你已经成功地支付了你的会费
) : (
{product.description}${product.price}
支付
)}
);
};
出口违约金；

查看此代码沙盒：