Ant Design 4.0更新指南(2)——Form

本文介绍了Ant Design 4.0中Form组件的重大更新,包括移除Form.create(),优化FormItem调用方式,引入ref句柄,提高表单使用的便捷性和代码整洁性,降低了维护成本。同时,未来可能推出ProForm,进一步简化基础表单的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

antd 原有的 Form 组件其实已经足够好用了,但是这次 4.0 对 Form 的更新开始注重不止要好用,还要“优雅”。“优雅”这个东西一直都很玄学。

antd 的 Form 一直以来都很特例独行,区别于其它 antd 组件,Form 的调用并不只是简单的引入组件即可,而是先要进行 Form.create()创建一个 Form 实例,使用 FormItem 时还需在 jsx 中调用 form.getFieldDecorator 方法,写法较为复杂,况且在 jsx 中插入大量的非节点代码,造成代码结构复杂,且一般情况下,一个 Form 表单会有多个 FormItem,也就意味着我们需要重复的去调用 form.getFieldDecorator 方法,导致后期维护成本很高。写这种重复且简单的无意义的代码,这和开篇所说的“优雅”背道而驰。

为了解决这些问题,这次 antd 团队从底层重写了 Form。首先,去掉了 Form.create()这一步操作,改为直接在组件内部去完成。另外将原来的 FormItem 的调用方式也进行了优化,下面是老版本的 FormItem 的调用示例:

<FormItem {
   
   ...formItemLayout} label="姓名">
  {
   
   form.getFieldDecorator("name", {
   
   
    rules: [
      {
   
   
        required
Ant Design是一套由蚂蚁金服开发的企业级UI组件库,具有丰富的UI组件和模板,广泛应用于前端开发中。而Axure RPLIB是一个用于快速原型设计的工具,能够帮助用户快速制作出高保真度的原型。Ant Design 4.0 Axure RPLIB组件是将Ant Design 4.0的UI组件封装为Axure插件,使用户在Axure中可以直接使用Ant Design的UI组件。 使用Ant Design 4.0 Axure RPLIB组件,你可以在Axure中轻松地使用Ant Design提供的丰富组件,而不需要自己手动绘制和设计。这样可以大大提高原型制作的效率,减少重复劳动。你只需要在Axure的库面板中导入Ant Design 4.0 Axure RPLIB组件,然后就可以通过简单的拖拽操作将组件添加到页面上。 Ant Design 4.0 Axure RPLIB组件不仅包含了Ant Design的基础组件,如按钮、表单、导航等,还包括了一些特定场景下常用的组件,如数据表格、图表等。这些组件都经过了精心设计和调试,能够满足不同项目的需求。 此外,Ant Design 4.0 Axure RPLIB组件还提供了一些常见的交互效果和动画效果,如下拉菜单、模态框等,帮助用户更好地展示原型。通过使用这些组件,你可以更好地呈现出产品的设计和交互,使原型更加贴近实际开发效果。 总之,Ant Design 4.0 Axure RPLIB组件为用户在Axure中使用Ant Design的UI组件提供了便利。它们的结合能够大大提高原型设计的效率和质量,帮助用户更好地展示产品的设计和交互。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值