【React入门实践】结合Ant-Design从0带你手把手开发【个人中心-信息修改】页面

至此就完成了页面初始化，可以看到数据显示了。

6. 保存功能的实现

（1）在model页面写update接口，接口为manage/ucenter/updateUserInfo，返回数据为a

update: async ({ params: [remoteValue] }, { dispatch }) => {

let a = await dispatch({

type: ‘container/post’,

params: [‘manage/ucenter/updateUserInfo’, remoteValue]

})

return a

}

（2）在保存按钮上添加点击事件onClick={onSave}并在page页面写onSave方法。其中fieldValue里面保存着form表单验证的数据对象，因此可以取到对应input的值。

const onSave = useCallback(() => {

const { validateFields } = form

validateFields((err: any, fieldValue: any) => {

if (err) return

let res = {

mobile: fieldValue.mobile,

email: fieldValue.email

}

dispatch({

type: ‘container/update’,

params: [res]

}).then((v: any) => {

console.log(v)

if (v.code === 200) {

message.success(‘保存成功’)

init()

} else {

message.error(v.message)

}

})

})

}, [dispatch, form, init])

至此可以实现保存功能。

7. 表单验证

Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法 - 健人雄 - 博客园

getFieldDecorator是一个方法，这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。这个方法本身返回一个方法，需要将需要获取值的标签包裹进去。

（1）验证手机号

<Form.Item label=“电话号码”>

{getFieldDecorator(‘mobile’, {

initialValue: (editData && editData.mobile) || ‘’,

rules: [

{ required: true, message: ‘电话号码不能为空’ },

{

pattern: /^((+)?86|((+)?86)?)0?1[3458]\d{9}$/,

message: ‘请输入正确的电话号码’

}

]

})()}

</Form.Item>

（2）验证邮箱

<Form.Item label=“邮箱地址”>

{getFieldDecorator(‘email’, {

initialValue: (editData && editData.email) || ‘’,

rules: [

{

pattern: /¹+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$/,

// pattern: /²+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,

// pattern: /³+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.]){1,2}[A-Za-z\d]{2,5}$/g,

message: ‘邮箱格式不正确’

},

{

max: 50,

message: ‘邮箱不得超过50字符’

},

{ required: true, message: ‘邮箱地址不能为空’ }

]

})()}

</Form.Item>

8. style样式

.commonForm{

margin-top: 20px;

:global{

.ant-input{

width:600px;

height:40px;

margin-left: 10px;

}

.ant-form.ant-form-inline{

display: flex !important

}

}

}

.search{

width: 120px;

height: 40px;

opacity: 1;

background: #2b7dff;

border-radius: 4px;

font-size: 14px;

font-weight: 400;

text-align: left;

color: #ffffff;

line-height: 21px;

text-align: center;

display: block;

margin-left:300px

}

9. 页面效果

10. 页面源码

// model.ts

import commonModel from ‘…/…/…/…/models/commonModel’

import { modelExtend } from ‘tyrael’

import { listMOM } from ‘…/…/…/…/common/dict’

import { getLocation } from ‘…/…/…/…/utils/tool’

const model: ModelExtend = modelExtend(commonModel, {

state: {

selectedRows: [],

listData: {},

productData: [],

editData: {},

detailData: {}

},

namespace: ‘container’,

effects: {

init: async (action, { dispatch }) => {

const { query } = getLocation()

const data = await dispatch({

type: ‘container/get’,

params: [‘manage/ucenter/detail’, query]

})

dispatch({

type: ‘container/setStore’,

params: [{ editData: data.data }]

})

},

update: async ({ params: [remoteValue] }, { dispatch }) => {

let a = await dispatch({

type: ‘container/post’,

params: [‘manage/ucenter/updateUserInfo’, remoteValue]

})

return a

}

},

reducers: {}

})

export default model

// page.tsx

import React, { useEffect, useCallback, useMemo, useState } from ‘react’

import { connect } from ‘react-redux’

import PageHeaderLayout from ‘…/…/…/…/components/PageHeaderLayout/index’

import { getLocation } from ‘…/…/…/…/utils/tool’

import styles from ‘./style.less’

import { Form, Input, Button, Card, Select, message } from ‘antd’

function Container({ dispatch, form, container: { editData } }: any) {

const { getFieldDecorator, validateFields, getFieldValue } = form

const { query } = getLocation()

const init = useCallback(() => {

dispatch(‘container/init’)

}, [dispatch])

useEffect(() => {

init()

}, [dispatch, init])

const onSave = useCallback(() => {

const { validateFields } = form

validateFields((err: any, fieldValue: any) => {

if (err) return

let res = {

mobile: fieldValue.mobile,

email: fieldValue.email

}

dispatch({

type: ‘container/update’,

params: [res]

}).then((v: any) => {

console.log(v)

if (v.code === 200) {

message.success(‘保存成功’)

init()

} else {

message.error(v.message)

}

})

})

}, [dispatch, form, init])

return (

<PageHeaderLayout title=“列表” className={‘commonList’}>

<Card

className={styles.table}

style={{ marginTop: 1, marginLeft: 1 }}

bordered={false}

bodyStyle={{ padding: ‘8px 32px 32px 32px’ }}

//labelAlign=“left”

layout=“horizontal”

className={styles.commonForm}

labelCol={{ span: 3 }}

wrapperCol={{ span: 12 }}

<Form.Item label=“用户名”>

{getFieldDecorator(‘name’, {

initialValue: (editData && editData.name) || ‘’

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

/labelAlign=“left”

layout=“horizontal”

className={styles.commonForm}

labelCol={{ span: 3 }}

wrapperCol={{ span: 12 }}

<Form.Item label=“用户名”>

{getFieldDecorator(‘name’, {

initialValue: (editData && editData.name) || ‘’

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-Q8vpiEPW-1714495462365)]

[外链图片转存中…(img-VAsKt6HO-1714495462366)]

---

1. a-zA-Z0-9_.- ↩︎

2. A-Za-z0-9\u4e00-\u9fa5 ↩︎

3. A-Za-z\d ↩︎