前言

最近在学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) => {
//这里用到了验证，所以要引入 getFieldDecoratorconst {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 (<>{/* 模态框 */}<UserModaltitle={'添加用户'}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 (<Modaltitle={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;
<Modaltitle={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) {//设置keyvalues['key'] = data.length + 1 + '';//设置默认值values = { ...values, tags: ['fefault'] };//如何只更新一条数据？？setData([...data, values]);setVisible(false);} else {alert('请完善信息');}});};//取消const HandleCancel = () => {//关闭模态框setVisible(false);};//点击登录按钮const HandleLogin = () => {setVisible(true);};

代码都是碎片性的，这里主要书写了实现流程，大家可以将代码整合起来。如果有问题，可以私聊我。

React --- TypeScript使用 antd 中 from 与Modal的一次总结

前言

表单的使用

模态框的使用

模态框中接受表单信息