Блог

Главная - Вопросы по программированию - Модальный пользовательский выбор Reactjs antd

Модальный пользовательский выбор Reactjs antd

#reactjs #modal-dialog #antd

#reactjs #модальный диалог #antd

Вопрос:

Когда пользователь нажимает OK , я хочу перейти к другой веб-ссылке на основе выбора переключателей в модальном antd, но я не уверен, как это сделать.

handleOk — это функция, которая вызывается при срабатывании OK.

Пожалуйста, предложите обходной путь

введите описание изображения здесь

Вот демонстрационная ссылка codesandbox

 import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Modal, Button, Radio } from "antd";

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  function handleOk() {
    // how to know which radio button is selected?
    alert("s");
  }

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Radio.Group defaultValue="a" buttonStyle="solid">
          <Radio value="a">Page1</Radio>
          <Radio value="b">Page2</Radio>
        </Radio.Group>
      </Modal>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

Комментарии:

1. вызывалась ли функция при нажатии кнопки ok

2. @linchong как мне узнать, какой переключатель выбран в handleOk функции?

3. я обновил свой ответ, вы можете попробовать

4. Спасибо @linchong, попробую это 🙂

Ответ №1:

вы можете добавить событие onChange на радио.Группа

     const [selectRadio, setselectRadio] = useState('')

     const select = (e) => {
       // you can save the value in here
       setselectRadio(e.target.value)
       console.log(e.target.value);
     };

        <Radio.Group
          defaultValue="a"
          onChange={(e) => {
            select(e);
          }}
          buttonStyle="solid"
        >
          <Radio value="a">Page1</Radio>
          <Radio value="b">Page2</Radio>
        </Radio.Group>
Метки: