antd form input长度_论如何搭上 ant 的快车-可视化的Form辅助

（上次标题有误，antd 是随手写的，其实应该是指 ant design 整个团队的方案）

哈喽，大家好，我又来了。

还记得我上次分享过，rc-field-form 是一个跨平台组件的事情嘛。

当我完成一系列小 demo 的编写测试之后，我很愉快的分享给了我的一些朋友，快来快来，以后你写 antd-mobile 的表单组件，就只需要这么写，就好了。

import {
     InputItem } from 'antd-mobile';
import React, {
     FC } from 'react';
import Form, {
     Field, useForm } from 'rc-field-form';

const Page: FC = () => {
    
  const [form] = useForm();

  return (
    <Form form={
    form} name="basic" initialValues={
    {
     username: 'xiaohuoni' }}>
      <Field
        name="username"
        rules={[{
     required: true, message: 'Please input your username!' }]}
      >
        <InputItem>Username</InputItem>
      </Field>
    </Form>
  );
};

export default Page;

只需要用 `Field` 包裹表单组件就可以了，是不是比以前更加清晰了。我跟你说，虽然说 antd@4 不支持低版本浏览器（全靠产品嘴炮活着的ie），但是有很多有趣高级的方案可以单独拿出来使用的。balabala（此处省略3000字，稿费照算哈）

经过我半小时的分享（吹牛），我的朋友终于得出了一个世纪拷问，"有没有一行代码就能够实现的?"(作为一个合格的伸手党，这个问题应该牢记于心。)

我说这简单啊，我给你封装一下。

<NomarInput title="Username" required fieldProps="username"/>
<NomarPicker title="Username" required fieldProps="username" data={data} />

你以后只需要这样用就可以了，是不是很爽啊。你可以用到你们的项目中跑跑看的。

import React, { FC } from 'react';
import { Button, List } from 'antd-mobile';
import Form, { Field, useForm } from 'rc-field-form';
import {
  NomarInput,
  NomarPicker,
  NomarSwitch,
  NomarTextArea,
  NomarDatePicker,
  NomarRadio,
  RangeDatePicker,
  ExtraInput,
} from '@alitajs/dform';
const seasons