Ant Design Mobile 表单组件示例 - 个人信息填写 - 常规

import React, { FC, useState } from 'react'\nimport {\n Form,\n Input,\n Button,\n Toast,\n TextArea,\n DatePicker,\n Picker,\n Space,\n ImageUploader,\n} from 'antd-mobile'\nimport { CloseCircleFill } from 'antd-mobile-icons'\nimport dayjs from 'dayjs'\nimport axios from 'axios';\nimport { ImageUploadItem } from 'antd-mobile/es/components/image-uploader'\nimport { demoSrc, mockUpload, mockUploadFail } from './utils.tsx'\n\nexport default () => {\n\n const [form] = Form.useForm()\n\n const DatePickerInputItem = () => {\n const [pickerVisible, setPickerVisible] = useState(false)\n\n return (\n <Form.Item\n noStyle\n shouldUpdate={(prevValues, curValues) =>\n prevValues.birthday !== curValues.birthday\n }\n >\n {({ getFieldValue, setFieldsValue }) => (\n <Form.Item\n name='birth_day'\n label='出生日期'\n trigger='onConfirm'\n arrow={\n getFieldValue('birthday') ? (\n <CloseCircleFill\n style={{\n color: 'var(--adm-color-light)',\n fontSize: 14,\n }}\n onClick={e => {\n e.stopPropagation()\n setFieldsValue({ birthday: null })\n }}\n />\n ) : (\n true\n )\n }\n onClick={() => {\n setPickerVisible(true)\n }}\n >\n <DatePicker\n visible={pickerVisible}\n onClose={() => {\n setPickerVisible(false)\n }}\n >\n {value =>\n value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'\n }\n \n </Form.Item>\n )}\n </Form.Item>\n )\n }\n\n // 渲染所选值\n function RenderChildrenDemo() {\n const [value, setValue] = useState([])\n const basicColumns = [\n [\n { label: '保密', value: '0' },\n { label: '男', value: '1' },\n { label: '女', value: '2' },\n ]\n\n ]\n return (\n <Picker\n columns={basicColumns}\n value={value}\n onConfirm={setValue}\n onSelect={(val, extend) => {\n // console.log('onSelect', val, extend.items)\n }}\n >\n {(items, { open }) => {\n return (\n \n \n {items.every(item => item === null)\n ? '未选择'\n : items.map(item => item?.label ?? '未选择').join(' - ')}\n <Input value={value} style={{ display: 'none' }} />\n \n )\n }}\n \n )\n }\n function RenderChildrenDemo2() {\n const [value, setValue] = useState([])\n const basicColumns = [\n [\n { label: '其他', value: '其他' },\n { label: '大专', value: '大专' },\n { label: '本科', value: '本科' },\n { label: '研究生', value: '研究生' },\n { label: '博士', value: '博士' },\n ]\n\n ]\n return (\n <Picker\n columns={basicColumns}\n value={value}\n onConfirm={setValue}\n onSelect={(val, extend) => {\n // console.log('onSelect', val, extend.items)\n }}\n >\n {(items, { open }) => {\n return (\n \n \n {items.every(item => item === null)\n ? '未选择'\n : items.map(item => item?.label ?? '未选择').join(' - ')}\n <Input value={value} style={{ display: 'none' }} />\n \n )\n }}\n \n )\n }\n const Basic: FC = () => {\n const [fileList, setFileList] = useState<ImageUploadItem[]>([\n // {\n // url: demoSrc,\n // },\n ])\n\n return (\n <ImageUploader\n value={fileList}\n onChange={setFileList}\n upload={mockUpload}\n />\n )\n }\n\n\n const save = () => {\n let x = form.getFieldsValue()\n axios.post('/api/test/save', x)\n .then(response => {\n Toast.show({\n content: 'Hello World',\n afterClose: () => {\n console.log('after')\n },\n })\n })\n .catch(error => {\n // 处理错误\n });\n\n }\n return (\n <>\n <Form\n form={form}\n layout='horizontal'\n footer={\n \n }\n >\n <Form.Header>添加个人信息</Form.Header>\n <Form.Item\n name='nick_name'\n label='姓名'\n >\n \n </Form.Item>\n <Form.Item\n name='sex'\n label='性别'\n >\n \n </Form.Item>\n <Form.Item\n name='xueli'\n label='学历'\n >\n \n </Form.Item>\n\n <Form.Item\n name='mobile'\n label='手机号'\n >\n \n </Form.Item>\n <Form.Item\n name='wx'\n label='微信'\n >\n \n </Form.Item>\n <Form.Item\n name='shengao'\n label='身高'\n >\n \n </Form.Item>\n <Form.Item\n name='zhiye'\n label='职业'\n >\n \n </Form.Item>\n <Form.Item\n name='biyexuexiao'\n label='毕业学校'\n >\n \n </Form.Item>\n <Form.Item\n name='jiguan'\n label='籍贯'\n >\n \n </Form.Item>\n <Form.Item\n name='gongzuochengshi'\n label='工作城市'\n >\n \n </Form.Item>\n <Form.Item\n name='shouru'\n label='收入'\n >\n \n </Form.Item>\n <Form.Item\n name='hunyin'\n label='婚姻状态'\n >\n \n </Form.Item>\n <Form.Item\n name='chefang'\n label='车房'\n >\n \n </Form.Item>\n <Form.Item name='remark' label='备注' help='备注'>\n <TextArea\n placeholder='备注'\n maxLength={200}\n rows={2}\n showCount\n />\n </Form.Item>\n <Form.Item\n name='imgs'\n label='图集'\n >\n \n </Form.Item>\n \n \n\n\n </>\n )\n}