如何使用antd的Form收集自定义组件的值

相信小伙伴们在使用antd里的Form表单时，经常会在表单里使用自定义组件。那么我们该怎么去拿到自定义组件的值以及给自定义组件传递一个初始值呢？

比如说,我们的自定义组件如下:

    import React from 'react'
    import {Select} from 'antd'
    
    export default () => {
        const {Option} = Select
        return  <Select>
                  <Option value={1}>1</Option>
                </Select>
    }

那么该自定义组件的的props会包含有一个value和一个onChange事件。即

    import React from 'react'
    import {Select} from 'antd'
    
    export default ({value,onChange}) => {  //props里含有value和onChange
        const {Option} = Select
        const handleSelect = (value) => {
             onChange(value);  //onChange事件
        };
        return  <Select onChange={handleSelect} defaultValue={value}> 
                  <Option value={1}>1</Option>
                </Select>
    }

该select上的defaultValue即为Form表单传递的初始值，然后我们通过onChange事件即可该自定义组件的值收集到表单中。