Reactjs antd 模态自定义选择

Question

当用户点击 OK 时，我想根据 antd modal 中单选按钮的选择导航到不同的网站 link，但我不确定该怎么做。

handleOk 是触发 OK 时调用的函数。

请提出解决方法

这是 codesandbox 演示 - 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"));

Answer 1

您可以在 Radio.Group

上添加 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>

Reactjs antd 模态自定义选择

Reactjs antd modal custom selection

modal-dialog

reactjs

antd