У меня есть список массивов, где каждая запись будет иметь переключатель, когда пользователь нажимает на один переключатель, он должен его выбрать, а когда пользователь нажимает на другой переключатель, первая выбранная кнопка записи должна отменить выбор переключателя.

Пожалуйста, найдите ссылку на sanbox ниже: ссылка на песочницу

Код:

  const handlesubmit = (formdata) => {
    console.log(formdata);
  };

  const renderCard = (card, index) => {
    return (
      <Col span={7} className="card-background">
        <h3 style={{ textAlign: "center" }}>{card.planType}</h3>
        <hr />
        <Form.Item name="selectedPlan">
          <Row>
            <Col span={16} offset={2}>
              {card.planDetails[0].name}
            </Col>{" "}
            <Col span={5} offset={1}>
              {card.planDetails[0].numOfSession}
            </Col>
            <Col span={16} offset={2}>
              {card.planDetails[1].name}
            </Col>{" "}
            <Col span={5} offset={1}>
              {card.planDetails[1].numOfSession}
            </Col>
            <Col span={16} offset={2}>
              {card.planDetails[2].name}
            </Col>{" "}
            <Col span={5} offset={1}>
              {card.planDetails[2].numOfSession}
            </Col>
          </Row>
        </Form.Item>
        <hr />
        <div style={{ textAlign: "center" }}>
          <Radio onChange={() => setSelectedPlan(card)}>
            Pay {card.planAmount}
          </Radio>
        </div>
      </Col>
    );
  };
0
boba poorna 18 Сен 2021 в 10:21

2 ответа

Лучший ответ

Вам нужно проверить свои переключатели в зависимости от состояния плана

Например

      <Radio 
           checked={selectedPlan === card.planAmount}
          onChange={() => setSelectedPlan(card.planAmount)}>
        Pay {card.planAmount}
      </Radio>
    
1
mehran gnaji 18 Сен 2021 в 07:35

Вы можете определить свое состояние следующим образом:

const [selectedPlan, setSelectedPlan] = useState(0);

И сделайте что-нибудь вроде:

  const setSelected = (event, index) => {
    setSelectedPlan(index);
  };

Наконец, замените Radio на:

  <Radio
    checked={selectedPlan == index ? true : false}
    name="radio"
    onChange={(e) => setSelected(e, index)}
  >
    Pay {card.planAmount}
  </Radio>

Edit Form Validations (forked)

1
Majid M. 18 Сен 2021 в 07:51