antd modal switch 取消确定

antd modal 的 switch 组件通常用于打开或关闭某些功能或选项。在 Modal 中，通常需要用到 switch 的取消和确定功能，可以通过以下代码实现：

import React, { useState } from 'react';
import { Modal, Switch, Button } from 'antd';

const MyModal = () => {
  const [visible, setVisible] = useState(false);
  const [switchValue, setSwitchValue] = useState(false);

  const handleCancel = () => {
    setVisible(false);
    setSwitchValue(false);
  };

  const handleOk = () => {
    setVisible(false);
    // do something with switchValue
  };

  return (
    <>
      <Button type="primary" onClick={() => setVisible(true)}>
        Open Modal
      </Button>
      <Modal
        title="My Modal"
        visible={visible}
        onCancel={handleCancel}
        onOk={handleOk}
      >
        <Switch
          checked={switchValue}
          onChange={setSwitchValue}
        />
        <span>{switchValue ? 'Enabled' : 'Disabled'}</span>
      </Modal>
    </>
  );
};

在这个例子中，我们在 Modal 中放置了一个 Switch 组件，并且在 state 中保存了 switch 的值。当用户点击取消按钮时，我们需要将 Modal 关闭并将 Switch 的值重置为 false。当用户点击确定按钮时，我们需要关闭 Modal，并且可以将 Switch 的值传递给其他组件或进行其他操作。