zoukankan      html  css  js  c++  java
  • react with form

    本部分主要为表单相关。

    1.表单form的react使用流程。

    A.引入antd插件,声明FormItem

    import {Form} from 'antd';

    const FormItem = Form.Item;

    B.包装属性,使组件带有this.props.form属性

    schoolEdit = Form.create({})(schoolEdit);

    C.在render中声明要使用到的this.props.form带的api

    const {getFieldDecorator} = this.props.form;

    一个完整的表单:

    <FormItem {...formItemLayout} label="详细地址:" hasFeedback >
            {getFieldDecorator('address', {rules: [{ required: true, message: '请输入详细地址1-100字符',type: "string",pattern: /^.{1,100}$/  }],})(<Input  placeholder="请输入详细地址"/>)}
    </FormItem>

    2.select选项showsearch属性实时匹配搜索。

    3.如果rules里面的内容为空,会默认验证类型是否为string。

    4.form里面嵌入form使用format时将会报错

    5.select在表单加上默认值时应当为option的value值,常见加入选择全部如下:

    <Option key={-1} value={null}>全部人员</Option>

    6.同一页面不能有两个表单项名字一样,同一页面如果有多个表单,提交时验证混乱,全部将会一起提交。

    解决办法,采用父子组件的形式,或者单独提交某些项。

    7.时间项的必填等规则在rules里面无效,可以在formItem里面写required。

    8.input组件若没有结尾符将会报错,若没有首字母大写则样式丢失。

    9.若表单e.target。value来取值时报错,则采用传参数value来获取。

    10.时间编辑时回显

    const date=detail.take_time?moment(detail.take_time, 'YYYY-MM-DD'):null;
    <FormItem {...formItemLayout} label="建校时间:" hasFeedback >
             {getFieldDecorator('schooltime', {initialValue:date, rules: [{type:"object"}], })(
                   <DatePicker placeholder="请选择建校时间" style={{  '160px' }}/>
              )}
     </FormItem>            

    11.设置必填可以rule里requore:true,也能直接在formItem设置required。

    12.获取单个表单的值:var aa = this.props.form.getFieldValue('aa');

    重置单个表单:this.props.form.resetFields(["aa",""]);

    13.单选按钮里赋值不能采用大括号,要使用引号,select option赋值是大括号

    <RadioGroup>

      <Radio value="1">启用</Radio>

    </RadioGroup>

    14.表单中getFieldDecorator必须写上名字,不然报错

    15.表单的验证规则写在rule内,带上类型验证

  • 相关阅读:
    [gj]三国攻势图
    [svc]msmtp+mutt发附件,发邮件给多个人
    [sh]清理memcached缓存
    [svc]jdk1.7.0_13(系列)下载url
    [svc]linux查看主板型号及内存硬件信息
    [svc][op]如何查看当前Ubuntu系统的版本
    [svc][bg]phabricator-zh_CN汉化包
    [na]台式机装原版Win2008R2
    [svc]salt源码安装软件和yum安装软件
    JSTL的相关使用
  • 原文地址:https://www.cnblogs.com/yuanyuan0809/p/6931349.html
Copyright © 2011-2022 走看看