目录
前言
最近在学React、项目中选择了ts、与antd来开发项目。第一次结束,难免会碰到许多坑,在这里记录一下,希望会对需要的朋友有所帮助。
Node:(React 版本选择的是hooks,所以代码中会有所不同,有兴趣的可以先去官网 看下Hooks )
表单的使用
关于form中代码可以去antd直接选择自己需要的copy下来改下,我这边主要说下注意的点
- 如何定义props类型
- 如何暴露form表单
import React from 'react'
//1.引入 Form
import { Form, Input } from 'antd'
//2.使用 formItem
const FormItem = Form.Item
//3.定义props
type IProps = Readonly<{
form: any
}>
//这是一个注册表单
const RegistrationForm = (props: IProps) => {
return();
}
//4. 将注册表单实例化并暴露出去
const UserForms = Form.create<IProps>()(RegistrationForm)
export default UserForms
下面是我注册表单的具体内容,仅供参考。
//定义样式
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 12 }
}
const RegistrationForm = (props: IProps) => {
//这里用到了验证,所以要引入 getFieldDecorator
const {
form: { getFieldDecorator }
} = props
//阻止默认事件,这里只是说明使用方法
//我案例是用Modal的button去接受表单信息所以可以不用写
const handleSubmit = (e: any) => {
e.preventDefault()
}
return (
<div>
<Form onSubmit={handleSubmit}>
<FormItem label="姓名" {...formItemLayout}>
{getFieldDecorator('name', {
rules: [{ required: true, message: 'Please input your username!' }]
})(<Input placeholder="Please input your nickname" />)}
</FormItem>
<FormItem label="年龄" {...formItemLayout}>
{getFieldDecorator('age', {
rules: [{ required: true, message: 'Please input your age!' }]
})(<Input type="number" placeholder="Please input your age" />)}
</FormItem>
<FormItem label="住址" {...formItemLayout}>
{getFieldDecorator('address')(
<Input placeholder="Please input your address" />
)}
</FormItem>
</Form>
</div>
)
}
模态框的使用
我这是将该Modal封装出来,给特定页面使用,下面说明我的文件结构:
user //用户模块
--subPage
--UserModal.tsx
--UserForm.tsx
--index.tsx //主页面
index.tsx中Modal代码
import React, { useState } from 'react';
import { Button } from 'antd';
import UserModal from './subPage/UserModal';
//主页面内容
const User = () => {
//1. 模态框是否显示
const [visible, setVisible] = useState(false);
//点击确认按钮,获取表单信息
const HandleOk = (form: any) => {
}
//取消
const HandleCancel = () => {
//关闭模态框
setVisible(false);
};
//点击登录按钮
const HandleLogin = () => {
setVisible(true);
};
return (
<>
{/* 模态框 */}
<UserModal
title={'添加用户'}
visible={visible}
onHandleOk={HandleOk}
onHandleCancel={HandleCancel}
/>
</>
);
};
export default User;
UserModal.tsx
1.定义一个Modal函数(或者类)
2. 定义 Modal传入参数类型
3. 接受 index.tsx传入的参数
4. 引入form表单,并使用
import React, { useRef } from 'react';
import { Modal, Button } from 'antd';
import UserForm from './UserForm';
//2. 定义模态框传入数据参数类型
type IProps = Readonly<{
visible: boolean;
title:string;
onHandleOk: (arg: any) => void;
onHandleCancel: () => void;
}>;
//1. 定义Modal函数
function UserModal(props: IProps) {
//3. 接受index.tsx中的参数
const { visible, onHandleOk, onHandleCancel,title } = props;
//这里获取form表单的信息
const form = useRef(null) as any;
return (
<Modal
title={title}
visible={visible}
onOk={() => onHandleOk(form)}
onCancel={() => onHandleCancel()}
>
<UserForm ref={form} />
</Modal>
);
}
export default UserModal;
模态框中接受表单信息
1.处理Modal中onOk,与onCanel函数
2.在onOK中将form表单信息传递给index.tsx中的处理函数
3.在index.tsx中接受form表单的信息
//UserModal.tsx中
/*
onOk:点击确定是,将form表单的信息传递给index.tsx中的onHandleOk
onCancel:点击时,高诉index.tsx去处理取消事件
**/
//这里获取form表单的信息
const form = useRef(null) as any;
<Modal
title={title}
visible={visible}
onOk={() => onHandleOk(form)}
onCancel={() => onHandleCancel()}
>
<UserForm ref={form} />
</Modal>
Node:具体代码看,UserModal.tsx文件
index.tsx文件中
//点击确认按钮,拿到表单信息
const HandleOk = (form: any) => {
const { validateFields } = form.current;
validateFields((error: any, values: any) => {
if (!error) {
//设置key
values['key'] = data.length + 1 + '';
//设置默认值
values = { ...values, tags: ['fefault'] };
//如何只更新一条数据??
setData([...data, values]);
setVisible(false);
} else {
alert('请完善信息');
}
});
};
//取消
const HandleCancel = () => {
//关闭模态框
setVisible(false);
};
//点击登录按钮
const HandleLogin = () => {
setVisible(true);
};
代码都是碎片性的,这里主要书写了实现流程,大家可以将代码整合起来。如果有问题,可以私聊我。