Как я могу изменить значение объекта в реакции на основе данных формы, введенных пользователем?

Question

Я использую реагирование и пытаюсь создать платежную систему с помощью кнопки 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;

product.price - это значение, которое мне нужно разрешить пользователям изменять, но оно должно оставаться числом, чтобы код, обрабатывающий платеж, понимал это.

Я довольно новичок, чтобы реагировать, и я ломал голову, пытаясь понять, как заставить этот контент работать динамично, но я изо всех сил пытаюсь заставить это работать, любая помощь очень ценится.

Answer 1

Рассмотрите возможность использования хуков, таких как 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;

. Проверьте эти коды и поля: https://codesandbox.io/s/vibrant-driscoll-odqmo