美文网首页
antd 表单获取自定义控件值

antd 表单获取自定义控件值

作者: importUIKit | 来源:发表于2021-05-17 17:45 被阅读0次

在实际业务使用中,经常遇到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, 这个地方就是传值的关键处。

相关文章

网友评论

      本文标题:antd 表单获取自定义控件值

      本文链接:https://www.haomeiwen.com/subject/tnnjjltx.html