Nitrogenous Polymorphic Molecule

    ant-design-mobile-form

    1.0.3 • Public • Published

    Ant-Design-Mobile-form 文档

    github

    点击查看github,欢迎提issue~

    场景

    表单怎么做校验才优雅呢?

    在 PC 端,一个做的比较知名的方案是 Ant Design 的表单组件。它可以通过简单的 rule 配置,来实现“必填”,“自定义错误提示”,甚至自定义规则校验。 Ant Design 官网:https://3x.ant.design/components/form-cn/

    然而在移动端,似乎从没一个组件库,做过类似的表单封装。哪怕 Ant Design Mobile,也没有做这个事情。

    所以需要一个库,来实现这个功能。因 Ant Design Mobile 的用户基数较大,本库是基于 Ant Design Mobile 的一个“扩展”。

    在线示例

    点击查看示例

    基本用法

    import React from "react";
    import { List, Toast, Button, InputItem as _InputItem } from "antd-mobile";
    import { create, addErrorExplanation } from "ant-design-mobile-form";
    import "./App.css";
     
    const InputItem = addErrorExplanation(_InputItem);
     
    const checkPhone = (rule, value, callback) => {
      // check code
    };
     
    class App extends React.Component {
      handleSubmit = () => {
        this.props.form.validateFields(async (errors, value) => {
          if (errors === null) {
            Toast.success(JSON.stringify(value));
          }
        });
      };
     
      render = () => {
        const { getFieldDecorator } = this.props.form;
     
        return (
          <div className="container">
            <List>
              {getFieldDecorator("phone", {
                rules: [
                  {
                    required: true,
                    message: "请输入您的手机号"
                  },
                  {
                    validator: checkPhone
                  }
                ]
              })(<InputItem placeholder="手机号" />)}
     
              {getFieldDecorator("password", {
                rules: [
                  {
                    required: true,
                    message: "请输入密码"
                  }
                ]
              })(<InputItem placeholder="密码" type="password" />)}
            </List>
     
            <Button
              style={{ marginTop: 24 }}
              onClick={this.handleSubmit}
              type="primary"
            >
              登录
            </Button>
          </div>
        );
      };
    }
     
    export default create()(App);

    API

    1、addErrorExplanation(ReactComponent)

    对 Ant Design Mobile 原生的组件,如 InputItemPicker 等组件,需要用 addErrorExplanation 包裹,返回一个新的组件。该新组件支持错误提示,将在 getFieldDecorator 中使用:const MyInputItem = addErrorExplanation(InputItem)

    2、create(options)(FormComponent)

    在 Ant Design Mobile 里面,没有 Form 组件,所以这边的 FormComponent 更像是一个概念,一种代码层次上的 Form,用法:export default create()(App)

    3、getFieldDecorator(key, options)(ReactElement)

    该API用来对组件是至关重要的,跟Ant Design的 getFieldDecorator 用法基本类似,用来对表单项加校验规则。具体用法请参考上面的“基本用法”。

    Install

    npm i ant-design-mobile-form

    DownloadsWeekly Downloads

    9

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    76.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • wangdafa