react typescript FunctionComponent antd crud
这个界面跟之前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的更多相关文章
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
- react typescript jest config (一)
1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...
- react + react-router + less +antd 开发环境
react + react-router + less +antd 开发环境搭建 1.基于create-reacte-app,需要先安装这个脚手架,然后初始化项目. 2.进入项目目录,首先 npm r ...
- react + typescript 学习
react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...
- 十九、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 ...
- React + Typescript领域初学者的常见问题和技巧
React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...
- Typescript + React 高仿 Antd 从零到一打造自己的组件库(完整)
买了张轩老师的课程,感觉很不错,适用于高级进阶,老师讲的通俗易懂,欢迎讨论学习.WX:Jujiu_i
- 使用react搭建组件库:react+typescript+storybook
前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/r ...
- 前端自动化测试 —— TDD环境配置(React+TypeScript)
欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...
随机推荐
- web搜索框的制作(必应)
搜索框中我们输入一些字或者字母,为何下面就会有一些自动补齐的相关搜索,比如我在搜索输入框中输入一个字母e,下面就会出现饿了么,e租宝,ems等相关的搜索链接.然后经过百度,发现原来很多厂商的服务器早已 ...
- Ironic 的 Rescue 救援模式实现流程
目录 文章目录 目录 救援模式 实现 UML 图 救援模式 以往只有虚拟机支持救援模式,裸机是不支持的.直到 Queen 版本 Ironic 实现了这个功能.救援模式下,用户可以完成修复.Troubl ...
- Spark3.0 preview预览版尝试GPU调用(本地模式不支持GPU)
Spark3.0 preview预览版可以下载使用,地址:https://archive.apache.org/dist/spark/spark-3.0.0-preview/,pom.xml也可以进行 ...
- Jenkins笔录
1.Linux下安装jdk8的方法 ,只需要一条命令就可以安装jdk: yum install java-1.8.0-openjdk* -y 执行过这条命令无需配置,直接可以使用. 2.JDK12版本 ...
- go 基础 处理异常
package main import "fmt" func main() { dosomething() } func dosomething(){ defer func() { ...
- CompletableFuture.allOf that doens't return Void(CompletableFuture.allOf不能返回Void的解决方法)
import java.util.List; import java.util.concurrent.CompletableFuture; import java.util.concurrent.Ti ...
- nginx创建www用户作用
linux创建www用户组和用户 wdcp中的nginx服务启动需要依赖www用户,因此若没有此用户就可能会启动失败.创建这个用户的方法: [root@bogon local]# id www [ro ...
- Django路由系统-URL命名&URL反向解析
命名URL和URL反向解析 前言 起始样式,HTML中的href是写死的,不能更改,如下示例代码: # urls中 urlpatterns = [ url(r'^admin/', admin.site ...
- 开启httpfs
参考: https://docs.cloudera.com/documentation/enterprise/6/6.2/topics/admin_httpfs.html#xd_583c10bfdbd ...
- 2019牛客暑期多校训练营(第二场)-H Second Large Rectangle(次大子矩阵,降维,直方图+单调栈)
题目链接:https://ac.nowcoder.com/acm/contest/882/H 题目:给n×m的由01组成的矩阵,求次大全1子矩阵的大小. 思路:第一步还是降维操作,用a[i][j]记录 ...