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的原理是在开发功能代码之前,先编写 ...
随机推荐
- 使用谷歌提供的SwipeRefreshLayout下拉控件,并自定义实现下拉加载的功能
package com.loaderman.swiperefreshdemo; import android.os.Bundle; import android.os.Handler; import ...
- 解决 ElementTree 无法处理中文
解决 ElementTree 无法处理中文,UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position 76-99: o ...
- 数据中心网络架构的问题与演进 — CLOS 网络与 Fat-Tree、Spine-Leaf 架构
目录 文章目录 目录 前文列表 CLOS Networking Switch Fabric 胖树(Fat-Tree)型网络架构 Fat-Tree 拓扑示例 Fat-Tree 的缺陷 叶脊(Spine- ...
- 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 ...
- POI XSSF与HSSF区别
java操作Excel时报如下错误: The supplied data appears to be in the Office 2007+ XML. You are calling the part ...
- 使用 WebStorm alt+f2 快速打开浏览器测试的一点bug
这个bug是涉及到中英文文件名的问题(不涉及到路径名): Case 1: 中文文件名 当打开alt+f2快捷方式打开含有中文名的html文件时,路径名直接变为localhost,所以找不到要打开的文件 ...
- CreateCompatibleBitmap 的使用
函数功能:该函数创建与指定的设备环境相关的设备兼容的位图. 函数原型:HBITMAP CreateCompatibleBitmap(HDC hdc,int nWidth,int nHeight): 参 ...
- sshpass密码
使用sshpass sshpass -p "password" scp -r user@example.com:/some/remote/path /some/local/path ...
- springboot后端实现条件查询,要配合使用mybatis
package cn.com.dyg.work.sqlgen; import cn.com.dyg.work.common.exception.DefException; import cn.com. ...
- 使用Zabbix进行IPMI监控
1. 安装IPMItool软件包 # yum -y install OpenIPMI OpenIPMI-devel ipmitoolfreeipmi 2. 配置Zabbix 服务器端配置z ...