这个界面跟之前VUE做的一样。并无任何不同之处,只是用react重复实现了一遍。

import React, { useState, useEffect } from 'react';
import { Row, Col, Table, Form, Cascader, Input, Button, Modal, message } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import http from '../../service'; import './post_category.css'
import { PostCategoryTo } from '../../models/PostCategoryTo';
interface PostCategoryProps extends FormComponentProps { } const PostCategory: React.FC<PostCategoryProps> = (props) => { const scroll = { y: window.innerHeight - 200 };
const columns = [
{ title: '名称', dataIndex: 'name' },
{ title: '路径', dataIndex: 'code' }
];
const rowSelection = {
onChange: (selectedRowKeys: any, rows: any) => {
setSelectedRows(rows)
}
} const { getFieldDecorator } = props.form;
const [loading, setLoading] = useState(false)
const [dataSource, setDataSource] = useState([])
let [selectedRows, setSelectedRows] = useState([])
let [formModel, setFormModel] = useState(new PostCategoryTo())
const fieldNames = { label: 'name', value: 'uid', children: 'children'} useEffect(() => {
loadData()
}, []) function loadData() {
http.url('v1/post-category')
.get()
.json(res => {
setDataSource(Object.assign([], res))
})
} function handleAdd () {
setFormModel(new PostCategoryTo())
props.form.resetFields()
} function handleModify () {
if (selectedRows.length !== 1) {
message.warn('请选择一行数据进行操作')
return
} setFormModel(PostCategoryTo.fromObject(selectedRows[0]))
} function handleDelete () {
if (selectedRows.length === 0) {
message.warn('请选择一行数据进行操作')
return
} Modal.confirm({
title: '请确认你要删除这些项目',
onOk() {
const list = selectedRows.map((it:any) => it.uid)
http.url(`v1/post-category/${list.join(',')}`).delete()
.text(() => {
loadData()
message.success('删除成功')
}).catch(err => message.error(err.message))
},
onCancel() {},
});
} function handleSave() {
props.form.validateFields((err, values) => {
if (!err) {
const param = Object.assign({}, formModel, values)
console.log(param, formModel, values)
if (Array.isArray(values.parentUid)) {
param.parentUid = values.parentUid[values.parentUid.length - 1]
}
setLoading(true) let resp: any = null
if (param.uid) {
resp = http.url(`v1/post-category/${param.uid}`).put(param)
} else {
resp = http.url('v1/post-category').post(param)
} resp.json(res => {
setFormModel(PostCategoryTo.fromObject(res))
loadData()
message.success('保存成功')
})
.finally(() => {
setLoading(false)
})
}
});
} return (
<Row gutter={32}>
<Col span={6}>
<h3>新增分类</h3>
<Form>
<Form.Item label='名称' help='名称是它显示在网页上。'>
{getFieldDecorator('name', {initialValue: formModel.name, rules: [{ required: true, message: '请输入账号' }]})(
<Input id='name' placeholder='请输入名称'></Input>
)}
</Form.Item>
<Form.Item label='路径' help='它通常是地址栏里面的路径,它通常都是小写的,只包含字母、数字和连字符。'>
{getFieldDecorator('code', {initialValue: formModel.code})(
<Input id="code"></Input>
)}
</Form.Item>
<Form.Item label='父分类'>
{getFieldDecorator('parentUid', {initialValue: formModel.parentUid})(
<Cascader fieldNames={fieldNames} options={dataSource} placeholder='选择父分类'/>
)}
</Form.Item>
<Form.Item label='描述' help='默认情况下描述不显示;一些主题可能会显示这一点。'>
{getFieldDecorator('description', {initialValue: formModel.description})(
<Input.TextArea id="description"></Input.TextArea>
)}
</Form.Item>
<div className="button-save">
<Button type='primary' loading={loading} onClick={handleSave}>保存</Button>
</div>
</Form>
</Col>
<Col span={18}>
<div className='toolbar'>
<Button size='small' onClick={handleAdd}>新增</Button>
<Button type='primary' size='small' onClick={handleModify}>修改</Button>
<Button type='danger' size='small' onClick={handleDelete}>删除</Button>
</div>
<Table columns={columns} size="small" rowKey="uid" rowSelection={rowSelection} dataSource={dataSource} pagination={false} scroll={scroll}></Table>
</Col>
</Row>
) } export default Form.create()(PostCategory)

react typescript FunctionComponent antd crud的更多相关文章

  1. 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

    一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...

  2. react typescript jest config (一)

    1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...

  3. react + react-router + less +antd 开发环境

    react + react-router + less +antd 开发环境搭建 1.基于create-reacte-app,需要先安装这个脚手架,然后初始化项目. 2.进入项目目录,首先 npm r ...

  4. react + typescript 学习

    react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...

  5. 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

    一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...

  6. React + Typescript领域初学者的常见问题和技巧

    React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...

  7. Typescript + React 高仿 Antd 从零到一打造自己的组件库(完整)

    买了张轩老师的课程,感觉很不错,适用于高级进阶,老师讲的通俗易懂,欢迎讨论学习.WX:Jujiu_i

  8. 使用react搭建组件库:react+typescript+storybook

    前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/r ...

  9. 前端自动化测试 —— TDD环境配置(React+TypeScript)

    欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...

随机推荐

  1. 使用谷歌提供的SwipeRefreshLayout下拉控件,并自定义实现下拉加载的功能

    package com.loaderman.swiperefreshdemo; import android.os.Bundle; import android.os.Handler; import ...

  2. 解决 ElementTree 无法处理中文

    解决 ElementTree 无法处理中文,UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position 76-99: o ...

  3. 数据中心网络架构的问题与演进 — CLOS 网络与 Fat-Tree、Spine-Leaf 架构

    目录 文章目录 目录 前文列表 CLOS Networking Switch Fabric 胖树(Fat-Tree)型网络架构 Fat-Tree 拓扑示例 Fat-Tree 的缺陷 叶脊(Spine- ...

  4. delphi中and和or的特殊用法

    1=1 10=2 100=4 1000=8 1 or 2 = 3(11); 1 and 3 = 1; 2 and 3 = 2; 2 or 4 = 6(110); 2 and 6 = 2; 4 and ...

  5. POI XSSF与HSSF区别

    java操作Excel时报如下错误: The supplied data appears to be in the Office 2007+ XML. You are calling the part ...

  6. 使用 WebStorm alt+f2 快速打开浏览器测试的一点bug

    这个bug是涉及到中英文文件名的问题(不涉及到路径名): Case 1: 中文文件名 当打开alt+f2快捷方式打开含有中文名的html文件时,路径名直接变为localhost,所以找不到要打开的文件 ...

  7. CreateCompatibleBitmap 的使用

    函数功能:该函数创建与指定的设备环境相关的设备兼容的位图. 函数原型:HBITMAP CreateCompatibleBitmap(HDC hdc,int nWidth,int nHeight): 参 ...

  8. sshpass密码

    使用sshpass sshpass -p "password" scp -r user@example.com:/some/remote/path /some/local/path ...

  9. springboot后端实现条件查询,要配合使用mybatis

    package cn.com.dyg.work.sqlgen; import cn.com.dyg.work.common.exception.DefException; import cn.com. ...

  10. 使用Zabbix进行IPMI监控

    1.    安装IPMItool软件包 # yum -y install OpenIPMI OpenIPMI-devel ipmitoolfreeipmi 2.    配置Zabbix 服务器端配置z ...