antd 表单获取自定义控件值

在实际业务使用中，经常遇到Form.item下不止一个input控件，可能有多个控件组成，这时候直接获取使用useForm获取控件值就没有效果了。
解决方案有两种，
第一种：Form.item下嵌套Form.item,然后获取值
第二种：自定义控件，然后获取自定义控件的值

废话不多说直接上代码：

import { Input, Radio, DatePicker, Form, Button } from 'antd';
import {useState,useEffect} from 'react';

const ValueView = (props) => {

    const [value, setValue] = useState({radioValue:'b'});

    //使用useEffect避免首次获取值为undefined
    useEffect(() => {
        props.onChange(value);
    }, []);

    const dateSelectChange = (e) => {
        let radioValue = e.target.value;
        setValue({ ...value, radioValue });
        props.onChange(value);
    }

    function onChange(date) {
        setValue({ ...value, date });
        props.onChange(value);
    }

    function inputChange(inputValue) {
        setValue({ ...value, inputValue });
        props.onChange(value);
    }

    return (<>
        <Input onChange={inputChange} />
        <Radio.Group
            defaultValue='b'
            onChange={(e) => dateSelectChange(e)}>
            <Radio.Button value="a">近一周</Radio.Button>
            <Radio.Button value="b">近一月</Radio.Button>
            <Radio.Button value="c">近三月</Radio.Button>
        </Radio.Group>
        <DatePicker
            onChange={onChange}
            style={{ marginLeft: 12 }}>
        </DatePicker>
    </>);
}

const Demo = () => {

    const [form] = Form.useForm();

    function getValue() {
        const values = form.getFieldValue('getValue');
        console.log(values);
    }

    return (<><Form form={form}>
        <Form.Item name='getValue' label='自定义控件'>
            <ValueView />
        </Form.Item>
    </Form>
        <Button onClick={() => getValue()}>
            获取自定义控件value
        </Button>
    </>);
}

export default Demo;

关键点在于props.onChange, 这个地方就是传值的关键处。