2021-03-12 ant design中Form表单赋初值

ant design中Form表单赋初值

当后端给了一个嵌套的对象，像下面这个 a，前端需要取a的值初始化一个form表单。
(普通表单在官网有很多栗子，这个是用嵌套了的对象给表单赋值)

a:{
 title:'这是form对象能通过a直接取到的第一层',
 b:{
    title:'这是form对象能通过a直接取到的第二层，直接通过b无法取到',
    name:'张三' ,  //name、sex是我们要用的值
    age:'18',
    sex:'2' 
 }
}

使用antd的Form组件

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

export default ()=> {

 const [someValues,setSomeValues] = useState({
   myName:'法外狂徒',
   mySex:'女',
   myAge:'888'
 })

  //此处通过request获取到后台返回的a ，我就不写了

 const [myform] = Form.useForm()

 const a = {
    title:'这是form对象能通过a直接取到的第一层',
    b:{
      title:'这是form对象能通过a直接取到的第二层，直接通过b无法取到',
      name:'张三' ,  //name、sex是我们要用的值
      sex:'2' 
    }
 }

//  myform.setFieldsValue(a)  //给整个myform表单赋值

 myform.setFields([        //给具体的项(bb和sex)赋值，name是项的路径
  {
    name: ['b', 'name'],
    value: someValues.myName,
    },
    {
    name: ['b','sex'],
    value: someValues.mySex,
    },
])

const selectOptions = [
  {  
    label:'男',
    value:'1'   //label是展示的选项标题，value才是Form.Item绑定的值，所以在给myform赋值的时候给的是value，而不是”男/女“
  },
  {
   label:'女',
   value:'2'
  }
]

  return (
       <Form form={myform} style={{margin:'50px'}}>     
          <Form.Item
             name={['b', 'name']}
             label='名字'
           >
              <Input style={{width:'100px'}}/>
          </Form.Item>
           <Form.Item
             name={['b', 'sex']}
             label='性别'
            >
              <Select style={{width:'100px'}} options={selectOptions} />
           </Form.Item>
       </Form>
  )
}

使用myform.setFieldsValue(a) ：
使用myform.setFields：

完。
希望能帮到跟我一样迷茫的前端小伙伴。