本文共 1419 字，大约阅读时间需要 4 分钟。

• 自定义组件

import React, {
    useState } from 'react';import {
    Input } from 'antd';interface PriceInputProps {
     value?: string;  onChange?: (value: {
   number: string | undefined; email: string | undefined}) => void;}const FormComponent: React.FC
   
     = ({
   value, onChange}) => {
     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 (    <>      
          
          );};export default FormComponent
   

• 使用

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 (    
   
      
            
     
      {
             console.log(values)        }} />      
     
          
            
               Submit              
        
   
  );};export default Demo

效果图

转载地址：http://wbqii.baihongyu.com/