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 用法基本类似,用来对表单项加校验规则。具体用法请参考上面的“基本用法”。

Dependents (0)

Package Sidebar

Install

npm i ant-design-mobile-form

Weekly Downloads

2

Version

1.0.3

License

ISC

Unpacked Size

76.2 kB

Total Files

8

Last publish

Collaborators

  • wangdafa