1. antd 弹出层、表单自定义校验

import React, { useState, useRef } from 'react'
import { Modal, Button, Form, Input, InputNumber } from 'antd'
import Draggable from 'react-draggable'

export default function ModForm() {
  const [form] = Form.useForm()
  let [loading, setLoading] = useState(false)
  let [visible, setVisible] = useState(false)
  let [disabled, setDisabled] = useState(true)
  let [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 })

  const draggleRef = useRef(null)

  const showModal = () => {
    setVisible(true)
  }

  const handleOk = () => {
    setLoading(true)
    form
      .validateFields()
      .then(values => {
        console.log('值：', values)
        setLoading(false)
        setVisible(false)
        form.resetFields()
      })
      .catch(info => {
        console.log('Validate Failed:', info)
      })
  }

  const handleCancel = () => {
    setNumber({
      value: ''
    }) //重置自定义验证表单
    setVisible(false)
    setLoading(false)
    form.resetFields() //重置
  }

  const onStart = (e, uiData) => {
    const { clientWidth, clientHeight } = window?.document?.documentElement
    const targetRect = draggleRef?.current?.getBoundingClientRect()

    setBounds({
      left: -targetRect?.left + uiData?.x,
      right: clientWidth - (targetRect?.right - uiData?.x),
      top: -targetRect?.top + uiData?.y,
      bottom: clientHeight - (targetRect?.bottom - uiData?.y)
    })
  }

  const validatePrimeNumber = number => {
    if (Number(number) === 11) {
      return {
        validateStatus: 'success',
        errorMsg: null
      }
    }
    return {
      validateStatus: 'error',
      errorMsg: '自定义验证错误提示!'
    }
  }

  const [number, setNumber] = useState({
    value: ''
  })

  const onNumberChange = e => {
    let value = e.target.value
    setNumber({ ...validatePrimeNumber(value), value })
  }

  return (
    <div>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>

      <Modal
        visible={visible}
        title={
          <div
            style={{
              width: '100%',
              cursor: 'move'
            }}
            onMouseOver={() => {
              if (disabled) {
                setDisabled(false)
              }
            }}
            onMouseOut={() => {
              setDisabled(true)
            }}
            onFocus={() => {}}
            onBlur={() => {}}
          >
            标题
          </div>
        }
        // onOk={() => {
        //   form
        //     .validateFields()
        //     .then((values) => {
        //       console.log('值：',values)
        //       form.resetFields()
        //     })
        //     .catch((info) => {
        //       console.log('Validate Failed:', info)
        //     })
        // }}
        // 非自定义footer才起作用

        onCancel={handleCancel}
        modalRender={modal => (
          <Draggable
            disabled={disabled}
            bounds={bounds}
            onStart={(e, uiData) => onStart(e, uiData)}
          >
            <div ref={draggleRef}>{modal}</div>
          </Draggable>
        )}
        footer={[
          <Button key="back" onClick={handleCancel}>
            取消
          </Button>,
          <Button
            key="submit"
            type="primary"
            loading={loading}
            onClick={handleOk}
          >
            Submit
          </Button>
        ]}
      >
        <div className="c-form-ct">
          <Form
            form={form}
            layout="vertical"
            name="form_in_modal"
            initialValues={{
              modifier: 'public'
            }}
          >
            <Form.Item
              name="name"
              label="name"
              rules={[
                {
                  required: true,
                  message: 'Please input the name'
                }
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              name="title"
              label="Title"
              rules={[
                {
                  required: true,
                  message: '请输入标题'
                }
              ]}
              validateStatus={number.validateStatus}
              help={number.errorMsg}
            >
              <Input
                value={number.value}
                onChange={e => {
                  onNumberChange(e)
                }}
              />
            </Form.Item>
          </Form>
        </div>
      </Modal>
    </div>
  )
}