Hooks 简易表单验证

import React from 'react'
import {
  Form, 
  Icon, 
  Input, 
  Button, 
  Row, 
  Col, 
  message,
  Select
 } from 'antd'
import { useRef, useState } from 'react'
import './style.scss';

const { Option } = Select;
const HooksForm = () =>{
  const [val,setVal] = useState({
    phone:'',
    name:'',
    selectColor:'Red'
  })
  const phoneRef = useRef()
  const nameRef = useRef()
  const selectRef = useRef()
  const handleSubmit =(e)=>{ 
    let data = validate()
    console.log('>>>>>>>>>>>', data)
    if(data.msg) {
      message.error(data.msg, 3)
      data.el && showWarn(data.el)
      return
    }
  }

  const validate =()=>{
    let data = {
      msg: '',
      el: null
    }

    let msgGroup = [
      {
        key:'phone',
        msg:'手机号',
        validate:f