React modal暴露ref简洁使用

• 父组件使用

import { useRef } from 'react'
import { FormModal } from './modal'

const IndexRoute = () => {
  const formRef = useRef<any>()
  const openModal = (row?: any) => {
    const params = {
      title: row?.id ? `【${row.name}】编辑` : '创建',
      isView: false,
      row,
      api: row?.id ?  editXXX : createXXX,
      refreshList: () => proTableProps.actionRef.current?.reload()
    }
    formRef.current?.acceptParams(params)
  }

  return (
    <>
    <Button onClick={openModal}>open modal</Button>
      <FormModal ref={formRef} />
 others page content
    </>
  )
}

export default IndexRoute

• 子组件

import { Icons } from '@/components/antd-icons'
import { Button, Form, Input, message, Modal, Upload } from 'antd'
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'

export const FormModal = forwardRef((props: any, ref) => {
  const [form] = Form.useForm()
  const [confirmloading, setConfirmloading] = useState<boolean>(false)
  const [visible, setVisible] = useState(false)
  const [modalProps, setModalProps] = useState<any>({
    isView: false,
    title: '',
    row: {},
    api: () => {}
  })

  const { isView, title, row, api, refreshList } = modalProps

  const onCancel = () => {
    setConfirmloading(false)
    form.resetFields()
    setVisible(false)
  }

  const acceptParams = (params: any) => {
    setModalProps(params)
    setVisible(true)
    params.row ? form.setFieldsValue({ ...params.row }) : form.resetFields()
  }

  const onOk = async () => {
    form.validateFields().then(async formValue => {
      setConfirmloading(true)
      const res = await api({ ...formValue, id: row?.id })
      if (res) {
        message.success(`操作成功`)
        onCancel()
        refreshList()
      }
      setConfirmloading(false)
    })
  }

  useImperativeHandle(
    ref,
    () => ({
      acceptParams
    }),
    []
  )

  useEffect(() => {
    row && Object.keys(row)?.length > 0
      ? form.setFieldsValue({ ...row })
      : form.resetFields()
  }, [row])

  const normFile = (e: { fileList: any }) => {
    if (Array.isArray(e)) {
      return e
    }
    return e && e.fileList
  }

  return (
    <Modal
      forceRender
      title={title}
      open={visible}
      onOk={onOk}
      onCancel={onCancel}
      confirmLoading={confirmloading}
      destroyOnClose={true}
    >
      <Form
        form={form}
        disabled={isView}
        initialValues={row}
        layout="horizontal"
        labelCol={{ span: 4 }}
        size="small"
      >
        <Form.Item
          label="名称"
          name="name"
          rules={[{ required: true, message: '请输入版本名称!' }]}
        >
          <Input placeholder="name" />
        </Form.Item>
         {/* 文件上传form包裹demo */}
        <Form.Item
          name="calibration_zip"
          label="附件"
          valuePropName="fileList"
          getValueFromEvent={normFile}
        >
          <Upload maxCount={1} beforeUpload={() => false}>
            <Button size="small" icon={<Icons.UploadOutlined />}>
              上传
            </Button>
          </Upload>
        </Form.Item>
      </Form>
    </Modal>
  )
})

原文地址：https://blog.csdn.net/qq_34273059/article/details/142823512

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！