Antd中的getFieldDecorator用法和注意事项

这篇具有很好参考价值的文章主要介绍了Antd中的getFieldDecorator用法和注意事项。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

getFieldDecorator是form表单的一个方法,接收两个参数

第一个参数是表单对应的字段

第二个是验证规则 该方法本身返回一个方法,需要将获取值的标签包裹进去

getFieldDecorator ( “自定义控件名”,{ 表单规则 } ) (“取值标签” )
 

<Form.Item>

        {getFieldDecorator('userName', {

          initialValue: 'Jack',

          rules: [

            {

              required: true,

              message: '请输入用户名',

            },

            {

              max: 10,

              message: '不得超过10个字符',

            },

          ],

        })(<Input/>)}

      </Form.Item>

效果:

getfielddecorator,form表单,html,javascript,前端

第二个括号中的组件用一个气泡组件<Popover></Popover>包裹的时候

监听不到input输入框内容的变化


 

<Form.Item>

        {getFieldDecorator('userName', {

          initialValue: 'Jack',

          rules: [

            {

              required: true,

              message: '请输入用户名',

            },

            {

              max: 10,

              message: '不得超过10个字符',

            },

          ],

        })(

          <Popover content={content} title="Title">

            <Input placeholder="请输入用户名" />

          </Popover>

        )}

      </Form.Item>

getFieldValue:

使用getFieldValue的可以获取由getFieldDecorator绑定的控件的值文章来源地址https://www.toymoban.com/news/detail-561192.html

getFieldValue(`rules[${index}].name`)   //自定义字段名字为变量的时候

getFieldValue('name')

到了这里,关于Antd中的getFieldDecorator用法和注意事项的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 什么是hive的高级分组聚合,它的用法和注意事项以及性能分析

    hive的高级分组聚合是指在聚合时使用GROUPING SETS、CUBE和ROLLUP的分组聚合。 高级分组聚合在很多数据库类SQL中都有出现,并非hive独有,这里只说明hive中的情况。 使用高级分组聚合不仅可以简化SQL语句,而且通常情况下会提升SQL语句的性能。 示例: Grouping sets的子句允许在一个

    2024年02月11日
    浏览(48)
  • 完全指南:mv命令用法、示例和注意事项 | Linux文件移动与重命名

    什么是 mv 命令? mv 命令是Linux和Unix系统中的一个常用命令,用于移动文件或重命名文件。它可以将文件从一个位置移动到另一个位置,也可以修改文件的名称。 mv 命令的作用和功能是什么? mv 命令主要有两个作用:移动文件和重命名文件。通过使用 mv 命令,您可以将文件

    2024年02月05日
    浏览(47)
  • Java对文件的写入和读取 (File类详解以及Input,OutputStream用法,注意事项)

    Java中,操作文件的类有很多, 核心的部分是File类,InputStream,OutputStream类 我们先来看看 File 类中的常见属性、构造方法和方法 属性 修饰符及类型 属性 说明 static String pathSeparator 依赖于系统的路径分隔符,String 类型的表示 static char pathSeparator 依赖于系统的路径分隔符,char 类型的

    2024年02月09日
    浏览(39)
  • 减少布线过程中的错误和损失的注意事项

    现实中布线人员总会遇到一些不可抗拒的因素、施工大意造成的失误,这些失误会带来一系列的返工。这一系列的返工将会带来多少经济损失?据福禄克调研了全球1,110 位电缆安装人员的调查报告,其中报告中指出,因布线施工中造成的问题,在后期认证过程蒙受的损失超过

    2024年02月07日
    浏览(40)
  • Go语言中的init函数: 特点、用途和注意事项

    在Go语言中, init() 函数是一种特殊的函数,用于在程序启动时自动执行一次。它的存在为我们提供了一种机制,可以在程序启动时进行一些必要的初始化操作,为程序的正常运行做好准备。 在这篇文章中,我们将详细探讨 init() 函数的特点、用途和注意事项,希望能帮助你更

    2024年02月08日
    浏览(54)
  • @NoArgsConstructor、@AllArgsConstructor、@RequiredArgsConstructor的区别和@Data和@Builder的用法以及在idea中使用的注意事项

    1、区别         @NoArgsConstructor:注解在类上,为类提供一个无参的构造方法。         @AllArgsConstructor:注解在类上,为类提供一个全参的构造方法         @RequiredArgsConstructor:注解在类上,会生成构造方法(可能带参数也可能不带参数)。注意:@RequiredArgsConstr

    2024年04月26日
    浏览(38)
  • java中的String使用注意事项、StringBuilder、StringBuffer、StringJoiner

    String使用注意事项 这里第二次创造了0个对象是因为字符串常量池中已经有\\\"abc\\\" StringBuilder 注意StringBuilder支持链式编程 StringBuilder 线程安全与不安全的区别在于,当系统里存在很多人同时操作同一个StringBuilder就可能出bug,而StringBuilder不会。 StringJoiner

    2024年02月12日
    浏览(33)
  • 【机器学习】详细解析Sklearn中的StandardScaler---原理、应用、源码与注意事项

    【机器学习】详细解析Sklearn中的StandardScaler—原理、应用、源码与注意事项 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程👈 希望得到您的订阅和支持~ 💡 创作高质量博文(平均质量分92+),分

    2024年03月20日
    浏览(46)
  • 详细stm32驱动SDRAM的注意事项以及在keil中的使用

    容量:SDRAM的容量是指其可以存储的数据量,通常以兆字节(MB)或千兆字节(GB)为单位。 时钟频率:SDRAM的时钟频率指的是其内部时钟的速度,通常以兆赫(MHz)为单位。时钟频率越高,SDRAM的数据传输速度越快。 CAS延迟:CAS延迟是指SDRAM在接收到读取请求后,需要多长时

    2024年02月10日
    浏览(38)
  • 【Go 基础篇】深入探索:Go语言中的切片遍历与注意事项

    嗨,Go语言学习者!在我们的编程旅程中,切片(Slice)是一个极其重要的工具。它可以帮助我们处理各种类型的数据,从而让我们的代码更加灵活和高效。本文将围绕Go语言中切片的遍历方法以及在遍历时需要注意的事项进行探讨,帮助你更好地理解和应用切片。 切片的遍历

    2024年02月11日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包