ant design——Form

最新推荐文章于 2024-09-03 14:56:25 发布

JIN's

最新推荐文章于 2024-09-03 14:56:25 发布

阅读量1.7k

点赞数

分类专栏： React 文章标签： ant design form initialValue

本文链接：https://blog.csdn.net/qq_41653587/article/details/89457709

版权

本文记录了在将原生表单控件替换为Ant Design Form时遇到的挑战。作者详细介绍了如何根据官方源码正确使用Form，特别是解决getFieldDecorator方法报错的问题。此外，还探讨了Ant Design Form控件的布局以及初始化值的设定，指出Input组件与原生input的不同，如不支持ref和直接用value设置初始值，并分享了解决之道。

摘要由CSDN通过智能技术生成

绪论：刚开始要把原生的表单控件替换成antdesign中的表单控件可谓是波折重重，我就讲讲我的辛酸史~~~

根据ant design官方网站中的源代码使用。
因为我只用几个控件，所以直接复制我要的那部分到我的项目中，可是呀，getFieldDecorator方法报错，屡试不爽,各种百度之下，终于知道了到底怎么使用：

//1. 定于组件的方式要是这样的：
 class 组件名 extends React.Component{
     ......}
 
//2. 导出方式是这样的：
 //Form.create(options):关于options的说明官网比较详细，可以敲敲代码自行练习
 const WrappedRegistrationForm = Form.create({
      name: 'register' })(组件名);
 export default WrappedRegistrationForm;

ant design表单控件的布局

const formItemLayout = {
     
		//（3.14.0 新增，之前的版本只能设置到 FormItem 上。）label 标签布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}
        labelCol: {
       
            xs: {
      span: 24 },
            sm: {
      span: 4, offset: 0 },
        },
        // （3.14.0 新增，之前的版本只能设置到 FormItem 上。）需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
        wrapperCol: {
     
            xs: {
      span: 24 },
            sm