Reactjs antd modal 自定义选择答案

【问题标题】：Reactjs antd modal custom selectionReactjs antd modal 自定义选择
【发布时间】：2021-01-22 13:16:04
【问题描述】：

当用户点击OK 时，我想根据 antd 模态中单选按钮的选择导航到不同的 Web 链接，但我不确定该怎么做。

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

请提出解决方法

这里是代码框演示 - 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"));

【问题讨论】：

点击确定按钮时是否调用了函数
@linchong 我如何知道handleOk函数中选择了哪个单选按钮？
我的答案更新了，你可以试试
谢谢@linchong，会试试这个:)

标签： reactjs modal-dialog antd

【解决方案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>

【讨论】：