React Ant Design 使用trigger方式弹框

调用弹框

<TransferOfDebtForm
                  onCancel={() => {}}
                  onSubmit={() => {
                    ref.current?.reload()
                  }}
                  id={record.id}
                  notRepaidAmount={record.notRepaidAmount}
                />

ModalFom 

import React, { useEffect, useRef, useState } from 'react'
import useStores from '../../store'
import { Button, message, Tooltip } from 'antd'
import type { ProFormInstance } from '@ant-design/pro-form'
import { ModalForm } from '@ant-design/pro-form'
import { useIntl } from 'umi'
import ProCard from '@ant-design/pro-card'
import { observer } from 'mobx-react'
import {
  dateToADDate,
  MliFormDatePicker,
  MliFormDigit,
  MliFormRow,
  MliFormSelect,
  useLookups
} from '@mli/app-common'

export type UpdateFormProps = {
  onCancel: () => void
  onSubmit: () => void
  id: string
  notRepaidAmount: number
}
const TransferOfDebtForm: React.FC<UpdateFormProps> = (props) => {
  const { formatMessage } = useIntl()
  const momentTW = require('moment-taiwan')
  const moduleName = 'agentDebtRecordEntity'
  const stores = useStores()
  const formRef = useRef<ProFormInstance>()
  const [visible, setVisible] = useState<boolean>(false)
  const { formatLookups } = useLookups(['CMS_TypeofCreditorright'])

  useEffect(() => {
    if (props.notRepaidAmount && visible) {
      formRef.current?.setFieldsValue({ debtTotBadAmt: Math.abs(props.notRepaidAmount) })
    }
  }, [visible])
  //債權移轉確認
  return (
    <ModalForm
      grid
      labelWrap
      title={formatMessage({ id: 'agentDebtRecordEntity.TransferOfDebtForm.title' })}
      width="840px"
      formRef={formRef}
      visible={visible}
      trigger={
        <Tooltip
          key="transferOfDebt"
          title={formatMessage({
            id: 'agentDebtRecordEntity.button.transferOfDebt'
          })}
        >
          <Button type="link">
            <i className="iconfont icon-confirmation-claims" />
          </Button>
        </Tooltip>
      }
      onVisibleChange={async (open: boolean) => {
        if (open !== visible) {
          setVisible(open)
          formRef.current?.resetFields()
        }
      }}
      modalProps={{
        onCancel: () => {
          setVisible(false)
        }
      }}
      onFinish={async () => {
        const formData = formRef.current?.getFieldsValue()
        const body = {
          data: [props.id],
          debtCategoryDate: dateToADDate(formData.debtCategoryDate, formatMessage),
          debtCategoryCode: formData.debtCategoryCode
        }
        const result = await stores.batchTransferOfDebt(body)

        if (result) {
          message.success(formatMessage({ id: 'common.message.success' }))
          props.onSubmit()
          setVisible(false)
        }
      }}
    >
      <ProCard>
        <MliFormRow style={{ position: 'relative', marginRight: 0 }}>
          {/* 債權轉移日期  */}
          <MliFormDatePicker
            moduleName="agentDebtRecordEntity.TransferOfDebtForm"
            columnName="debtCategoryDate"
            required
            initialValue={momentTW().startOf('month').subtract(1, 'days')}
          />
          {/* 債權分類 */}
          <MliFormSelect
            moduleName={moduleName}
            columnName="debtCategoryCode"
            required
            options={formatLookups.CMS_TypeofCreditorright?.filter((s) =>
              ['4', '5'].includes(s.value)
            )}
          />
          {/*轉銷呆賬金額*/}
          <MliFormDigit
            moduleName="agentDebtRecordEntity"
            columnName="debtTotBadAmt"
            required
            disabled={true}
            fieldProps={{
              formatter: (value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
              parser: (value) => value!.replace(/\$\s?|(,*)/g, '')
            }}
          />
        </MliFormRow>
      </ProCard>
    </ModalForm>
  )
}
export default observer(TransferOfDebtForm)