Antd 4 Form 默认值问题

问题

通过设置Input、Select这些表单组件的defaultValue属性值去设置默认值后，onFinish方法获取的值为undefined，而不是设置的默认值。

这是一个使用defaultValue的示例：

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

class Example extends Component {
  onFinish = values => {
    console.log(values)
    // 结果: {name: undefined, gender: undefined}
  }

  render() {
    const { Item } = Form
    const { Option } = Select
    return (
      <Form onFinish={this.onFinish}>
        <Item name='name' label='姓名' >
          <Input defaultValue='Anand Zhang' />
        </Item>
        <Item name='gender' label='性别'>
          <Select defaultValue='0'>
            <Option value='0'>男</Option>
            <Option value='1'>女</Option>
          </Select>
        </Item>
        <Item>
          <Button type='primary' htmlType='submit'>提交</Button>
        </Item>
      </Form>
    )
  }
}

export default Example

解决方法

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

<Form
  onFinish={this.onFinish}
  initialValues={{
    name: 'Anand Zhang',
    gender: '0'
  }}
>
  <Item name='name' label='姓名' >
    <Input />
  </Item>
  <Item name='gender' label='性别'>
    <Select>
      <Option value='0'>男</Option>
      <Option value='1'>女</Option>
    </Select>
  </Item>
  <Item>
    <Button type='primary' htmlType='submit'>提交</Button>
  </Item>
</Form>

console打印结果为：{name: "Anand Zhang", gender: "0"}，获得了默认值。总之学习使用Antd时需要注意使用Form组件的initialValues去设置表单字段的默认值。

版权声明：

Anand's Blog文章皆为站长Anand Zhang原创内容，转载请注明出处。

包括商业转载在内，注明下方要求的文章出处信息即可，无需联系站长授权。

请尊重他人劳动成果，用爱发电十分不易，谢谢！

请注明出处：

本文出自：Anand's Blog

本文永久链接：https://anandzhang.com/posts/frontend/11