useModal（简单）

介绍

因为一个项目中会有很多弹框，然后如果是同类型的弹框的话每次都要重新写一遍Modal。这样的话也不能说有事，就是会写很多重复代码并且在后期维护会感觉很难受，所以基于hooks我们也可以简单的做一个useModal。

这里的话我是做了一个基于表单的useFormModal。

封装

hooks/useFormModal

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

interface modalState {
  initTitle: string,
  initContent: any,
}

interface ModalProps {
  onOk: any,
  onCancel: any
}

const useModal = ({ initTitle, initContent }: modalState) => {
  const [visible, setVisible] = useState(false);
  const content = initContent;
  const [title, setTitle] = useState(initTitle);

  const CustomModal = (props: ModalProps) => {
    const onOk = () => {
      const { onOk } = props;
      const form = content.props.form;
      onOk(form)
    }
    const onCancel = () => {
      const { onCancel } = props;
      onCancel()
    }

    return (
      <Modal
        visible={visible}
        title={title}
        okText='确定'
        onOk={onOk}
        cancelText='取消'
        onCancel={onCancel}
        maskClosable={false}
      >
        {content}
      </Modal>
    )
  }

  const show = () => {
    setVisible(true)
  }
  const hide = () => {
    setVisible(false)
  }

  return { show, hide, CustomModal, setTitle }
}
export default useModal;

这里因为我是基于form封装的，所以最后我还是暴露form出去到最上面那层了

网上看到的例子是这样定义content的，但是我在后续使用中如果使用setContent的话会报错，所以我就改成了上面那种写法，不够感觉也足够了。如果有哪位大哥知道怎么用还请告知！

const [content,setContent] = useState(initContent);

return { show, hide, CustomModal,setContent, setTitle }

还有一个问题，就是隐藏动画没了，我后面看了一下发现是dom节点隐藏的时候是被销毁了，而直接使用Modal的话是会保留在dom节点中，所以会有隐藏动画，不知道什么原因。

我的猜想就是使用hooks的话状态在另外一层，不在当前组件，所以他不会在当前页面保存，那这样就很有问题呀！还是说倒回去用高阶组件包一层？

使用

addModal.tsx

import React from 'react';
import { Form, Input, Button } from 'antd';

const layout = {
  labelCol: { span: 24 },
  wrapperCol: { span: 24 }
}

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 }
}

export interface modalState {
  currentItem: any
}

const AddModal = (props: any) => {
  // console.log('AddModal', props)

  const { currentItem } = props;
  const [form] = Form.useForm()
  return (

    <Form
      {...layout}
      form={form}
    >
      <Form.Item
        label='Username'
        name='username'
        initialValue={currentItem.username}
        rules={[
          { required: true, whitespace: true, message: '请填写用户名' }
        ]}
      >
        <Input autoComplete='off' />
      </Form.Item>
      <Form.Item
        label='Password'
        name='password'
        initialValue={currentItem.password}
        rules={[{ required: true, message: '请填写密码' }]}
      >
        <Input.Password />

      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type='primary' htmlType='submit'>
          登录
          </Button>
      </Form.Item>
    </Form>
  )
}
export default AddModal;

这里的话主要就是接受数据渲染了，其他的最后扫尾就不用他来干了，这个组件就可以好好的专注于表单活动了。

index.tsx

import React from 'react';
import { Result, Button } from 'antd';
import moment from 'moment'

import useFormModal from '@/hooks/useFormModal';
import AddModal from './AddModal';

import { modalState } from './TestModal';

const userName = window.localStorage.getItem('user');

const currentItem = {
  username: '1',
  password: '123456'
}

const ModalProps: modalState = {
  currentItem,
}

const Home = () => {
  /** 
   * 添加弹框
  */
  const {
    show: addShow,
    hide: addHide,
    CustomModal: AddCustomModal
  } = useFormModal({ initTitle: '添加', initContent: AddModal(ModalProps) })

  // useModal
  /**
   * 添加
   */
  const AddCustomModalProps = {
    onOk: function () {
      console.log([...arguments][0]);
      const form = [...arguments][0];
      let values = form.getFieldValue();
      console.log(values);
      addHide()
    },
    onCancel: function () {
      addHide()
    }
  }

  return (
    <div>
      <Result
        status="success"
        title={`Hello ${userName}!`}
        subTitle={`当前事件为： ${moment(new Date).format('YYYY.MM.DD HH:mm')}`}
        extra={[
          <Button type="primary" key="1" onClick={addShow}>
            弹框1
          </ Button>
        ]}
      />
      <AddCustomModal {...AddCustomModalProps} ></AddCustomModal>
    </div>
  )
}
export default Home;

这样通过props来回归最后的提交动作，这样的话就专注于每个组件处理自己的事情。

效果

写在后面

不推荐上面这种封装写法，原因就是后面的节点不会留在dom中，所以一些动效就没了。然后也不够标准化，所以还是建议Modal单独写，不过他的title,type,visible可以单独拎出来做管理。类似这种

import { useState, useMemo } from 'react';

declare type ModalType = 'add' | 'update';

export interface useModalConfig {
  defaultVisible?: boolean;
  defaultType?: ModalType;
}

export default function useModal(config: useModalConfig = {}) {
  const { defaultType = 'add', defaultVisible = false } = config;
  const [type, setType] = useState<ModalType>(defaultType);
  const [visible, setVisible] = useState<boolean>(defaultVisible);

  function toggle() {
    setVisible(!visible);
  }

  function setTypeWithVisible(val: ModalType) {
    setType(val);
    setVisible(true);
  }

  return useMemo(() => {
    return {
      type,
      setType,
      visible,
      setVisible,
      toggle,
      setTypeWithVisible,
    };
  }, [type, visible]);
}