Antd is a react component library. Recently, we are making a background system. The UI component library uses ANTD and the template component – ProComponents developed based on Ant Design. Old drivers don’t have to look.

Q1-form, which uses a Form componentdefaultValueProperty set to default values,onFinishMethod gets a value ofundefinedInstead of setting the default value.

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='Everyday Hobbies'>
            <Select defaultValue='write bugs'> 
              <Option value='write bugs'>Write the code</Option> 
              <Option value='move brick'>To move the brick</Option> 
            </Select> 
          </Item> 
          <Item> 
            <Button type='primary' htmlType='submit'>submit</Button> 
          </Item> 
        </Form>)}export default MyForm
Copy the code

Solution: Use the initialValues attribute on the Form component to set the default value for the Form field. The initialValues attribute value is of type object.

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:'to writebug'}} >
          <Item name='like' label='Everyday Hobbies'>
            <Select defaultValue='write bugs'> 
              <Option value='write bugs'>Write the code</Option> 
              <Option value='move brick'>To move the brick</Option> 
            </Select> 
          </Item> 
          <Item> 
            <Button type='primary' htmlType='submit'>submit</Button> 
          </Item> 
        </Form>)}export default MyForm
Copy the code

Q2-modal-form Advanced form, which cannot assign values to form items when editing

You can use initialValues to set the default value. InitialValues should normally be used for editing, but… Failed to assign the value through form.setfieldsValue (initialValues) when editing was discovered.

Solution: Discard modal-Forms in favor of the base form component Form