关于使用Antd 组件库的一些总结

用户4923961869631

2026-01-24 16 阅读2分钟

Select 选择框中的数据，如果是动态生成的话。需要先设置下拉框中的选项，然后再设置对应的value值，否则会出现value值无法返显对应的label的情况
在Form表单中，可以使用dispaly: none 来隐藏表单项，这样子做的好处，可以保证字段都注册了。可以方便的使用form.setFieldsValue()方法来设置表单的值。假如是条件渲染的，某些条件下才渲染这个表单项，某些条件下，又不渲染这个表单项的，使用form.setFieldsValue会有一些问题。

<Form style={{ display: 'none' }}>
   {
       getFieldDecorator('ruleName', {
           initialValue: undefined,
           rules: [],
       })(<Input />)
   } 
</Form>

Antd 的form表单提交的时候，如果这个字段的值是undefined，并不会提交到后台
Antd 3.x 中通过getFieldDecorator来注册字段，当这些字段，又是动态生成，可以动态增删的时候，页面显示的字段，和通过getFieldValue 取出来的字段，会不一致。因此，可以使用高版本的Antd Form 组件，比如 Antd 4.x
Antd 3.x 中，通过form表单API，来管理数据，比如通过form.getFieldValue/form.getFieldsValue来管理数据，有时候，比直接使用useState中定义的state要更方便一点。（之所以是有时候，是因为在模板中调用确实是这样子。如果是在函数里面调用getFieldValue，需要想一下，这个函数调用的时机,有可能通过getFieldValue 拿到的不是最新的值）

return (
    +form.getFieldValue('type') === 1 ? <div>欢迎您！</div> : null
)

Antd 的tabs 组件，Tab.Pane子组件，如果不加forceRender为true,则会只渲染激活的Tab栏目，其他的tab栏目则会暂时不渲染。如果加了forceRender为true，则会渲染所有的Tab栏目，但只有激活的tab栏目的dispaly属性，不为false。
Antd 的Form 表单，也是一种数据存储方案，有时候，比直接使用useState 要更加方便，特别是直接应用于模板中的时候。在Antd3.x中，使用form.getFieldValue方法之前，需要先使用getFieldDecorator 方法来修饰注册字段