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

目录

前言

表单的使用

模态框的使用

模态框中接受表单信息

---

前言

最近在学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);
  };

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