自定义hooks,弹窗组件

49 阅读1分钟
import React, { useState }  from 'react';
import { Modal } from 'antd';


export function useModal({onCancel, onOk, ...props}) {
  const [visible, setVisible] = useState(false);

  const onConfirm = async () => {
    if (onOk?.()) {
      setVisible(false);
    }
  },
  onClose = () => {
    onCancel?.();
    setVisible(false);
  };

  return [
    setVisible,
    () => <Modal visible={visible} onOk={onConfirm} onCancel={onClose}>
      
    </Modal>
  ]
}


export function Parent(props) {
  const [onVisible, Modal] = useModal({
    ...props,
    onCancel() {

    },
    onOk() {

    }
  });
  return (
    <>
      <a onClick={() => onVisible(true)}>添加</a>
      <Modal />
    </>
  )
}