认识

基础使用

---

import React, {useEffect, useState} from 'react';
import {ProForm, ProFormSelect, ProFormText} from '@ant-design/pro-components';

interface FormTypes {
    username: string;
    sex: string;
    like: {
        ball: {label: string; value: string}[];
        song: {label: string; value: string}[];
    };
}
const FormItemLayout = {
    labelCol: {span: 1},
    wrapperCol: {span: 17},
};
const formDataDefaultValue = {
    username: '柏拉图',
    sex: '男',
    like: {
        ball: [{label: '篮球', value: '篮球'}],
        song: [{label: '狼爱上羊', value: '狼爱上羊'}],
    },
};

function App() {
    const [form] = ProForm.useForm<FormTypes>();
    const [formData, setFormData] = useState<FormTypes>(formDataDefaultValue);

    const sexOptions = [
        {
            label: '男',
            value: '男',
        },
        {
            label: '女',
            value: '女',
        },
    ];
    const ballOptions = [
        {
            label: '篮球',
            value: '篮球',
        },
        {
            label: '足球',
            value: '足球',
        },
    ];
    const songOptions = [
        {
            label: '星星点灯',
            value: '星星点灯',
        },
        {
            label: '狼爱上羊',
            value: '狼爱上羊',
        },
    ];

    const handleFinish = async (values: any) => {
        console.log(values);
        console.log(form);
    };
    const handleValuesChange = (changedValues: any, allValues: any) => {
        console.log(changedValues);
        console.log(allValues);
    };
    useEffect(() => {
        form.setFieldsValue({...formData});
    }, [formData]);

    return (
        <div>
            <ProForm<FormTypes>
                layout="horizontal"
                labelAlign="left"
                {...FormItemLayout}
                form={form}
                onFinish={handleFinish}
                onValuesChange={handleValuesChange}>
                <ProFormText
                    width="xl"
                    name="username"
                    label="用户名"
                    placeholder="请输入用户名"
                />
                <ProFormSelect
                    options={sexOptions}
                    width="xl"
                    name="sex"
                    label="性别"
                />
                <ProForm.Group title="爱好">
                    <ProFormSelect.SearchSelect
                        width="xl"
                        options={ballOptions}
                        name={['like', 'ball']}
                        label="球类"
                        labelCol={{span: 2}}
                    />
                    <ProFormSelect.SearchSelect
                        width="xl"
                        options={songOptions}
                        name={['like', 'song']}
                        label="歌曲"
                        labelCol={{span: 2}}
                    />
                </ProForm.Group>
            </ProForm>
        </div>
    );
}

export default App;