antd 踩坑指北

antd 是一个 react 的组件库，最近在做一个后台系统，UI 组件库使用到了 antd，以及基于 Ant Design 而开发的模板组件 - procomponents，记录一些踩过的坑，希望对新手朋友们有帮助。老司机就不用看了。

Q1 - Form 中，使用表单组件的 defaultValue 属性设置默认值后，onFinish 方法获取的值为 undefined ，而不是设置的默认值。

import React, { Component } from 'react'
import { Form, Select, Button } from 'antd'

const MyForm = () => {
    const onFinish = value => { 
      console.log(value) // {like: undefined}
    }

    return (
        <Form onFinish={this.onFinish}>
          <Item name='like' label='日常爱好'>
            <Select defaultValue='写 bug'> 
              <Option value='写 bug'>写代码</Option> 
              <Option value='搬砖'>搬砖</Option> 
            </Select> 
          </Item> 
          <Item> 
            <Button type='primary' htmlType='submit'>提交</Button> 
          </Item> 
        </Form>
    )
}

export default MyForm
复制代码

解决方法： 使用 Form 组件上的 initialValues 属性去设置表单字段的默认值，initialValues 属性值的类型为对象。

import React, { Component } from 'react'
import { Form, Select, Button } from 'antd'

const MyForm = () => {
    const onFinish = value => { 
      console.log(value) // {name: undefined, like: undefined}
    }

    return (
        <Form 
            onFinish={this.onFinish} 
            initialValues={{ name: 'harry_yang', like: '写 bug' }}
        >
          <Item name='like' label='日常爱好'>
            <Select defaultValue='写 bug'> 
              <Option value='写 bug'>写代码</Option> 
              <Option value='搬砖'>搬砖</Option> 
            </Select> 
          </Item> 
          <Item> 
            <Button type='primary' htmlType='submit'>提交</Button> 
          </Item> 
        </Form>
    )
}

export default MyForm
复制代码

Q2 - modal-form 高级表单，编辑时无法给表单项赋值

modal-form 高级表单 想要新建和编辑共用一个表单组件 modal-form ，从官网文档上查到，可以使用 initialValues 设置默认值，按理来说设置 initialValues 就可以用于编辑功能，但是。。。发现编辑时通过 form.setFieldsValue(initialValues) 无法赋值成功。

解决方法： 弃用 modal-form , 换用基础表单组件 Form