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的原理是在开发功能代码之前,先编写 ...
随机推荐
- linux系统安装zint
背景: 今天代码拉下了发现启动时报错,一看原来是同事用了zint的gem,我又没安,然后花了点时间解决,但其中踩了几次坑,所以打算记录下: 一.zint开源库的介绍 zint 是一个开源的条码编码库, ...
- 阶段3 3.SpringMVC·_06.异常处理及拦截器_2 SpringMVC异常处理之演示程序异常
原来的index.jsp删除.新建一个 创建pages文件夹.再创建success.jsp页面 重新部署项目 把这个项目移除掉 加入新的项目 启动tomcat服务器 模拟异常 方法抛出异常给前端控制器 ...
- idea中git远程版本回退
idea中git远程版本回退 2017年10月15日 15:25:36 gomeplus 阅读数:19313 工作中遇到git远程仓库需要回退到历史版本的问题,根据网上的搜索结果结合自己的实践,整理了 ...
- clientX和clientY属性需要注意的地方
clientX和clientY为可视区鼠标的位置. 1. 随鼠标移动的div块[runjs] 当document有多个页面时,会出现问题.[runjs] 2. 解决方案:scrollTop, scro ...
- IFC布局特点
IFC(inline formatting context),行内格式化上下文 特点: 1.内联元素在水平线上一个接一个排列 2.内部元素水平方向上的margin.padding.border有效,垂 ...
- 【Linux】【四】linux 删除文件
1.rm -f * 删除当前目录下的文件 application/file/test/tools/logs/ #最经典的方法,删除当前目录下的所有类型的文件 2.rm -rf /ro ...
- Control的Invoke和BeginInvoke
转载:https://www.cnblogs.com/c2303191/articles/826571.html 近日,被Control的Invoke和BeginInvoke搞的头大,就查了些相关的资 ...
- java游戏服务器 建造者模式
这里的具体的建造者ConcreteBuilder可以多个 这里我们以建造汽车为例: 假设汽车需要:方向盘.汽车壳.还有四个轮子 ---------这三样才能跑起来 如果你因为粗心漏了其中的某个建造过 ...
- div与焦点事件
div正常情况下是无法获得焦点的,所以其blur方法和focus方法都是没有用的,解决方案如下: <div tabindex="0"></div> 添加ta ...
- Tensorflow实战第十一课(RNN Regression 回归例子 )
本节我们会使用RNN来进行回归训练(Regression),会继续使用自己创建的sin曲线预测一条cos曲线. 首先我们需要先确定RNN的各种参数: import tensorflow as tf i ...