React中如何通过表单输入修改对象值？集成PayPal按钮V2设置支付金额

Hey there! Let's get that dynamic payment amount sorted out for your React + PayPal Button V2 setup. Since you're new to React, we'll break this down step by step so it makes total sense.

Step 1: Use React State to Track the Payment Amount #

Instead of a static product variable, we'll use React's useState hook to manage the payment amount. This way, whenever the user updates the value, React automatically re-renders the necessary parts of your component.

Step 2: Add a User Input for Amount Adjustments #

We'll add a number input field (restricted to numeric values) and handle its onChange event to update our state. We'll also make sure to convert the input to a valid number—critical for PayPal's payment processing to work correctly.

Step 3: Sync the Amount with Your PayPal Button #

Whether you're using the official React PayPal button package or loading the script manually, we'll ensure the button always uses the latest amount the user enters.

Here's the full updated code with all these changes:

import { Fragment, useState, useEffect, useRef } from 'react';
// Uncomment below if using the official PayPal button package:
// import { PayPalButton } from "react-paypal-button-v2";

export const Payment = () => {
  // Track payment amount (default to 123) and payment status with state
  const [paymentAmount, setPaymentAmount] = useState(123);
  const [paidFor, setPaidFor] = useState(false);
  const paypalRef = useRef(null);

  // Handle input changes and ensure we only keep valid numeric values
  const handleAmountChange = (e) => {
    // Filter out non-numeric characters (allow only numbers and decimal points)
    const cleanedValue = e.target.value.replace(/[^0-9.]/g, '');
    // Convert to number, default to 0 if input is empty
    const numericValue = cleanedValue ? Number(cleanedValue) : 0;
    // Update state only if the value is a valid number
    if (!isNaN(numericValue)) {
      setPaymentAmount(numericValue);
    }
  };

  // Re-initialize PayPal button whenever the amount changes (for manual script loading)
  useEffect(() => {
    if (!paidFor && paypalRef.current) {
      // Clear existing button to avoid duplicates
      paypalRef.current.innerHTML = '';
      // Render new button with updated amount
      window.paypal.Buttons({
        createOrder: (data, actions) => {
          return actions.order.create({
            purchase_units: [{
              amount: {
                value: paymentAmount.toFixed(2) // Ensure 2 decimal places for currency
              }
            }]
          });
        },
        onApprove: (data, actions) => {
          return actions.order.capture().then(() => {
            setPaidFor(true);
            alert('Payment successful!');
          });
        }
      }).render(paypalRef.current);
    }
  }, [paymentAmount, paidFor]);

  return (
    <Fragment>
      <div className="landing-inner">
        {paidFor ? (
          <div>
            <h1>You have successfully paid your dues</h1>
          </div>
        ) : (
          <div>
            <h1 className="x-large text-primary">
              Dues total payment: ${paymentAmount.toFixed(2)}
            </h1>
            {/* Input field for users to adjust the payment amount */}
            <div style={{ margin: '1.5rem 0' }}>
              <label>Adjust Payment Amount:</label>
              <input
                type="number"
                step="0.01" // Allow decimal increments for cents
                value={paymentAmount}
                onChange={handleAmountChange}
                style={{ marginLeft: '0.5rem', padding: '0.5rem', width: '160px' }}
              />
            </div>
            {/* Uncomment below if using the official PayPal button package */}
            {/* <PayPalButton
              amount={paymentAmount.toFixed(2)}
              onSuccess={() => {
                setPaidFor(true);
                alert('Payment successful!');
              }}
              options={{
                clientId: "YOUR_PAYPAL_CLIENT_ID" // Replace with your actual client ID
              }}
            /> */}
            {/* Keep this div if loading PayPal script manually */}
            <div ref={paypalRef} />
          </div>
        )}
      </div>
    </Fragment>
  );
};

export default Payment;

Key Details to Note: #

• State Management: useState ensures React reacts to changes in the payment amount and updates the UI accordingly.
• Input Validation: The handleAmountChange function filters out invalid characters and converts input to a number, preventing errors with PayPal's payment system.
• Currency Precision: We use toFixed(2) to format the amount to 2 decimal places—this is required for most currency processing systems, including PayPal.
• PayPal Integration:
  • If using the official react-paypal-button-v2 package, simply pass the formatted amount to the amount prop.
  • If loading the script manually, the useEffect hook re-renders the button whenever the amount changes, ensuring it always uses the latest value.

内容的提问来源于stack exchange，提问作者Gary Baine