react ant design自定义组件如何进行表单校验?

自定义组件

import React, { useState } from 'react';
import { Input } from 'antd';

export  default function FormComponent(props){

    const {value, onChange}= props;
    const [number, setNumber] = useState(value);
    const [email, setEmail] = useState(value);

    const setOnNumberChange = (e) => {
        const newVal = e.target.value;
        setNumber(newVal);
        setVals();
    };
    const setOnEmailChange = (e) => {
        const newVal = e.target.value;
        setEmail(newVal);
        setVals()
    };
    const setVals = () => {

        if ( onChange ) {
            onChange({
                email, number
            })
        }
    };

    return (
        <>
            <Input
                type="text"
                value={ number }
                onChange={ setOnNumberChange }
                style={ {
                    width: 100,
                } }
            />
            <Input
                type="email"
                value={ email }
                onChange={ setOnEmailChange }
                style={ {
                    width: 100,
                } }
            />
        </>

    );
};

使用组件代码

import React  from 'react';
import { Form, Button } from 'antd';

import FormComponent from './formComponent'

const Demo = () => {
  const onFinish = values => {
    console.log('Received values from form: ', values);
  };

  const checkUser = (rule, value) => {
    console.log(value)
    if (value && value.number > 0) { //校验条件自定义
      return Promise.resolve();
    }

    return Promise.reject('请输入准确的用户信息');
  };

  return (
    <Form
      name="customized_form_controls"
      layout="inline"
      onFinish={onFinish}
      initialValues={{
        price: {
          number: 0,
          currency: 'rmb',
        },
      }}
    >

      <Form.Item
        label="标题"
        name="user"
        required
        rules={[{ validator: checkUser }]}
      >
        <FormComponent onChange={(values)=>{
          console.log(values)
        }} />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Demo