React:实现一个增删改查基本管理页面

最新推荐文章于 2024-05-30 09:00:37 发布

治愈系的江予夺

最新推荐文章于 2024-05-30 09:00:37 发布

阅读量3.9k

点赞数 2

分类专栏：前端 react 文章标签： typescript reactjs 前端

本文链接：https://blog.csdn.net/alanrnzearn/article/details/110918813

版权

本文档详细记录了如何使用React和TypeScript来开发一个具备增删改查基本功能的管理页面，重点在于提升代码的可读性和用户体验。通过此实践，可以了解如何在实际项目中应用这两种技术。

摘要由CSDN通过智能技术生成

记录一下最近根据自己写代码的习惯进行了一个改进后的写法调整，主要是为了增强可阅读性与美观性的，实现了增删改查等基础功能，用的react+typescript开发。

import {
    inject,observer } from 'mobx-react';
import * as React from 'react';
import {
    Table, Input, Button,Modal, Form, Select,message } from 'antd';
import {
    FormInstance } from 'antd/lib/form';
import {
    ExclamationCircleOutlined } from "@ant-design/icons";
import {
    columns } from './constans';
import {
    API } from "@/http";
import './style.less';
const {
    Search } = Input;
const {
    Option } = Select;
const {
    confirm } = Modal;
const formRef = React.createRef<FormInstance>();

const layout = {
   
	labelCol: {
    span: 6 },
	wrapperCol: {
    span: 18 },
};
interface IProps {
   
	children: React.ReactNode;
	home: any;
	global: any;
	route: any;
}
interface IState {
   
	visible: boolean;
	dataSource: any[];
	typeList: any[];
	total:number;
	title:string;
	isEdit:boolean;
	initReqParams:{
   
		page: number;
		pageSize: number;
	};
	editId:number;
	search:string;
}

class DataManager extends React.Component<IProps, IState> {
   
	constructor(IProps: any) {
   
		super(IProps);
	}
	state: IState = {
   
		visible: false,
		dataSource: [],
		typeList:[],
		total: 0,
		title: '',
		isEdit: false,
		editId:undefined,
		initReqParams: {
   
			page: 1,
			pageSize: 10,
		},
		search:'',
	};
	componentDidMount = ()=>{
   
		this.getDataSourceList();
		this.getDataType();
	}
	// 获取数据源类型
	getDataType

最低0.47元/天解锁文章