Ant Design Mobile Form.Item 自定义组件，失去焦点的时候如何操作

동경

已于 2023-04-28 16:56:36 修改

阅读量905

点赞数

分类专栏： Js 文章标签：前端 antDesign

于 2023-04-28 16:52:31 首次发布

本文链接：https://blog.csdn.net/weixin_43814775/article/details/130429452

版权

Js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

简单的举个例子，不会写出所有代码

问题点

当 Input 失焦的时候不会触发，phoneNumberRules-校验
看文档写着 mobile.ant.design
所以直接在子组件里查看父组件传的方法都有什么，props 里查到有onBlur()方法
ok 直接调用此方法来实现我们的需求- 失去焦点的时候校验

子组件


import React from 'react';
import { Input } from "antd-mobile";

const PhoneNumberInput: React.FC<any> = (props) => {

  return (
    <>
      <div>
        <img src={require("@/assets/images/deposit/co-icon.png")} />
        <span>+57</span>
      </div>
      <Input
        type="tel"
        value={props.value}
        onChange={props.onChange}
        onFocus={() => {
          props.handleChangeValidError(1, false)
        }}
        onBlur={() => {
          props.onBlur && props.onBlur();
          props.handleChangeValidError(1, true)
        }}
      />
    </>
  );
}

export default PhoneNumberInput;

父组件

 const phoneNumberRules = [
    {
      validator: (_: any, value: string) => {
        // 校验是否为空
        if (value === undefined || value === "") {
          return Promise.reject('不能为空');
        }

        // 校验是否为合法的电话号码
        const phonePattern = new RegExp("[0-9]");
        if (value) {
          for (const char of value) {
            if (!phonePattern.test(char)) {
              return Promise.reject('电话号码格式错误');
            }
          }
        }

        return Promise.resolve();
      },
    },
  ];


	<Form form={form} className={"addInfoForm"}>
       {
         <React.Fragment>
           {/* Phone No. */}
           <div className={less.phoneWrap}>
             <Form.Item
               name={phoneNumberField}
               rules={phoneNumberRules}
               validateTrigger={"onBlur"}
               hasFeedback={validError[1]}
             >
               <PhoneNumberInput handleChangeValidError={handleChangeValidError} />
             </Form.Item>
           </div>
         </React.Fragment>
      }
   </Form>