CODEWITHSUNDEEP
reactjsmodal-dialogantd
Mahesh
Mahesh

Reputation: 1333

Reactjs antd modal custom selection

When user clicks OK, I want to navigate to different web link based upon the selection of the radio buttons in the antd modal but I'm unsure how to do that.

handleOk is the function which gets invoked when OK is triggered.

Please suggest a workaround

enter image description here

Here is the codesandbox demo - link

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"));

Upvotes: 0

Views: 981

Answers (1)

linchong
linchong

Reputation: 483

you can add a onChange event on Radio.Group

    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>

Upvotes: 1

Related Questions