react ant design自定義組件如何進行表單校驗?示例

• 自定義組件

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<PriceInputProps> = ({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 (
    <>
      <Input
        type="text"
        value={ number }
        onChange={ setOnNumberChange }
        style={ {
          width: 100,
        } }
      />
      <Input
        type="email"
        value={ email }
        onChange={ setOnEmailChange }
        style={ {
          width: 100,
        } }
      />
    </>

  );
};

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 (
    <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

效果圖