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 }

使用

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来回归最后的提交动作，这样的话就专注于每个组件处理自己的事情。

效果