onChange 函数在 React Bootstrap 的 Form.Check 组件中不起作用

Question

基本上我已经使用 React bootstrap 创建了一个表单。我已经使用 onchange 属性根据所选选项设置 paymentMethod 状态。但问题是：单选复选框只工作一次。当我单击条纹复选框时，状态会发生变化。但是现在当我再次点击 paypal 时，状态没有改变。我不知道我哪里出错了，也不知道为什么会这样。

import React, { useState } from "react";
import { Form, Row, Col, Button } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { savePaymentMethod } from "../actions/cartActions";
import CheckoutSteps from "../components/checkout/CheckoutSteps";
import FormContainer from "../components/FormContainer";

const PaymentPage = () => {
  const shippingAddress = useSelector((state) => state.cart.shippingAddress);

  const [paymentMethod, setPaymentMethod] = useState("Stripe");
  console.log(paymentMethod);

  const dispatch = useDispatch();
  const navigate = useNavigate();

  if (!shippingAddress) {
    navigate("/shipping");
  }

  function submitHandler(e) {
    e.preventDefault();
    dispatch(savePaymentMethod(paymentMethod));
    navigate("/placeorder");
  }
  return (
    <>
      <CheckoutSteps step1 step2 step3 />
      <FormContainer>
        <h2>Payment Method</h2>
        <Form onSubmit={submitHandler}>
          <Form.Group>
            <Form.Label className='my-3' as='legend'>
              Select Method
            </Form.Label>
            <Col>
              <Form.Check
                className='my-3'
                type='radio'
                label='PayPal or Credit Card'
                id='PayPal'
                name='paymentMethod'
                value='PayPal'
                checked
                onChange={(e) => setPaymentMethod(e.target.value)}
              />
              <Form.Check
                className='my-3'
                type='radio'
                label='Stripe'
                id='Stripe'
                name='paymentMethod'
                value='Stripe'
                onChange={(e) => setPaymentMethod(e.target.value)}
              />
            </Col>
          </Form.Group>

          <Button type='submit' variant='primary' className='my-3'>
            Continue
          </Button>
        </Form>
      </FormContainer>
    </>
  );
};

export default PaymentPage;

Answer 1

checked 道具应该是基于所选收音机的动态道具。您可以对 onChange:

使用单个函数

const PaymentPage = () => {
  const [paymentMethod, setPaymentMethod] = useState("Stripe");

  const onPaymentMethodChange = ({ target: { value } }) => {
    setPaymentMethod(value);
  };

  return (
    <>
      <Form.Group>
        <Form.Label className="my-3" as="legend">
          Select Method
        </Form.Label>
        <Col>
          <Form.Check
            className="my-3"
            type="radio"
            label="PayPal or Credit Card"
            id="PayPal"
            name="paymentMethod"
            value="PayPal"
            checked={paymentMethod === "PayPal"}
            onChange={onPaymentMethodChange}
          />
          <Form.Check
            className="my-3"
            type="radio"
            label="Stripe"
            id="Stripe"
            name="paymentMethod"
            value="Stripe"
            checked={paymentMethod === "Stripe"}
            onChange={onPaymentMethodChange}
          />
        </Col>
      </Form.Group>
    </>
  );
};

onChange 函数在 React Bootstrap 的 Form.Check 组件中不起作用

onChange function not working in React Bootstrap's Form.Check component

javascript

reactjs

react-bootstrap