本人小白一名，第一次学习react ,该资料为本人原创，采用的是react+ant design的Tabled的一个小demo,暂时只实现了增加，删除单行，多行删除有Bug,查看详情，呕心沥血耗时一周完成，禁止抄袭，转载请先留言，
1、main.jsx
import React from 'react'; import ReactDom from 'react-dom'; import ExampleTable from './ExampleTable.jsx' ReactDom.render(, document.getElementById('AppRoot') );
2、ExampleTable.jsx, 注：记住引入antd.css， 否则Table组件无法正常显示。
import React from 'react';
import { Table,Button,Input,Icon,Popconfirm,Alert } from 'antd';
import AddUser from './AddUser.jsx'
import UserDetails from './UserDetails.jsx'
class ExampleTable extends React.Component {
constructor(props) {// 构造函数
super(props);
this.state = {
dataSource:[
{ key: 1, nid:1, name: 'tab', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 2, nid:2, name: 'shift', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 6, nid:6, name: 'ctrl', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 4, nid:4, name: 'caps lock', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 5, nid:5, name: 'enter', gender:'女' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'}
],
index : '',
PersonCount :0,
selectedRowKeys:[],
selectedRows:[],
record : 'abc'
};
this.OnDelete= this.onDelete.bind(this);//绑定this,声明该方法需要绑定this, 直接在onClick中调用
this.appendPerson = this.appendPerson.bind(this);
this.handleSelectedDelete = this.handleSelectedDelete.bind(this);
this.columns = [
{ title: '编号', dataIndex: 'nid', key: 'nid' ,width:'8%'},
{ title: '姓名', dataIndex: 'name', key: 'name' ,width:'15%'},
{ title: '性别', dataIndex: 'gender', key: 'gender' ,width:'10%'},
{ title: '年龄', dataIndex: 'age', key: 'age',width:'15%', },//render: (text, record, index) => (Math.floor(record.age/10))*10+"多岁"},
{ title: '学校', dataIndex: 'schoolname', key: 'schoolname',width:'15%' },
{ title: '在校表现', dataIndex: 'description', key: 'description' ,width:'20%'},
{ title: '操作', dataIndex: '', key: 'operation', width:'32%',render: (text,record,index)=>(
) },
];
}
appendPerson(event){//得到子元素传过来的值
let array = [];
let count = 0;
this.state.dataSource.forEach(function (element) {
Object.keys(element).some(function (key) {
if (key === 'nid') {
count++;
array[count] = element.nid
}
})
})
let sortData =array.sort();//对遍历得到的数组进行排序
let MaxData = sortData[(this.state.dataSource.length)-1]//取最后一位下标的值
event.key=MaxData+1;
event.nid = MaxData+1;
this.setState({
dataSource:[...this.state.dataSource,event]
})
}
onDelete(index){
console.log(index)
const dataSource = [...this.state.dataSource];
dataSource.splice(index, 1);//index为获取的索引，后面的 1 是删除几行
this.setState({ dataSource });
}
handleSelectedDelete(){
if(this.state.selectedRowKeys.length>0){
console.log(...this.state.selectedRowKeys)
const dataSource = [...this.state.dataSource]
dataSource.splice(this.state.selectedRows,this.state.selectedRows.length)
this.setState({ dataSource });
}
else{
}
}
render() {
//联动选择框
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
this.setState({//将选中的id和对象存入state
selectedRowKeys:selectedRowKeys,
selectedRows:selectedRows
})
console.log(selectedRows,selectedRowKeys)
},
onSelect: (record, selected, selectedRows) => {
//console.log( record, ` selected :${selected}`,`selectedRows:${selectedRows}`);
},
onSelectAll: (selected, selectedRows, changeRows) => {
//console.log(selected, selectedRows, changeRows);
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
}),
}
return (
);
}
}
module.exports = ExampleTable;
3、AddUser.jsx
import React from 'react';
import {Form,Input,Button,Select,Modal} from 'antd'
const FormItem = Form.Item;
const Option = Select.Option;
class AddUser extends React.Component{//在es6中定义一个AddUser类
constructor(props){//构造函数
super(props);
this.state = {
visible:false
};
this.handleAdd = this.handleAdd.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleOk = this.handleOk.bind(this)
this.handleClear = this.handleClear.bind(this)
}
handleAdd() {
this.setState({
visible: true
});
}
handleSubmit(e){//提交表单
e.preventDefault();
this.props.form.validateFieldsAndScroll((err,values)=>{
if(!err){
//console.log('接收的值：',values);
this.setState({
visible:false
})
this.props.form.resetFields();//清空提交的表单
//当值传递到父元素后，通过回调函数触发appendPerson方法将参数values带到父元素
this.props.callback(values);
}
})
}
handleClear(){
this.props.form.resetFields();
}
handleOk() {
this.setState({
visible: false
});
}
render(){
const {getFieldDecorator} = this.props.form;
const formItemLayout = {
labelCol:{span : 6},
wrapperCol:{span: 14}
};
const tailFormItemLayout = {
wrapperCol: {
span: 14,
offset: 8
}
};
return(
{getFieldDecorator('name', {
rules:[{
required:true,message:'请输入您的 name！'
}]
})(
)}
{getFieldDecorator('gender',{
rules:[{
required:true,message:'请输入您的 gender！'
}]
})(
)}
{getFieldDecorator('age',{
rules:[{required:true,message:'请选择您的 Age'
}]
})(
)}
{getFieldDecorator('schoolname',{
rules:[{required:true,message:'请输入您的就读学校'}]
})(
)}
{getFieldDecorator('description',{
rules:[{required:true,message:'请输入您的在校表现'}]
})(
)}
)
}
}
AddUser = Form.create()(AddUser); //解决了getFieldDecorator无法定义;
export default AddUser;
4、UserDetails.jsx
import React from 'react'
import {Modal,Button} from 'antd'
/*
*/
class UserDetails extends React.Component{
constructor(props){
super(props);
this.state={
visible:false
}
this.handlePopup = this.handlePopup.bind(this);
this.handleOkOrCancel = this.handleOkOrCancel.bind(this);
}
handlePopup() {
this.setState({
visible: true
});
}
handleOkOrCancel(){
this.setState({
visible: false
});
}
render(){
return(
详情
姓名： {this.props.pass.name}
性别： {this.props.pass.gender}
年龄： {this.props.pass.age}
就读学校： {this.props.pass.schoolname}
在校表现： {this.props.pass.description}
)
}
}
export default UserDetails;
5、ExampleStyle.css
#div-right{
width:80%;
height:400px;
text-Align:center;
margin: 0 auto;
}
.div_body{
margin-top: 0.5%;
}
.table_oftop{
padding: 10px;
}
.selectedDelete{
float: left;
margin-left: 35%;
}
.add_user_btn{
margin-left: auto;
}
.user_details{
float: right;
}
ant design 官网地址：https://ant.design/components/table-cn/ 看不懂的可以参考官方示例。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
写下你的评论吧 !
推荐阅读
-
本文探讨了如何从动态网站中提取站点密钥，特别是针对验证码（reCAPTCHA）的处理方法。通过结合Selenium和requests库，提供了详细的代码示例和优化建议。 ...
[详细]
蜡笔小新 2024-12-28 04:11:47
-
本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准，旨在为第三方应用提供安全的用户资源访问授权，同时确保用户的账户信息（如用户名和密码）不会暴露给第三方。 ...
[详细]
蜡笔小新 2024-12-28 12:07:46
-
-
2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商，ARM在嵌入式处理器市场占据主导地位，其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家，共同探讨当前嵌入式系统的前沿技术和应用。 ...
[详细]
蜡笔小新 2024-12-28 11:58:48
-
一位程序员的妻子在网上分享了她丈夫在北京工作八年的经历，月薪仅3万元，存款情况却出乎意料。本文探讨了高学历人才在大城市的职场现状及生活压力。 ...
[详细]
蜡笔小新 2024-12-28 11:14:15
-
尽管商业智能（BI）工具在中国的普及程度尚不及国际市场，但近年来，随着本土企业的持续创新和市场推广，国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争，国内BI工具通过不断优化产品和技术，赢得了越来越多用户的认可。 ...
[详细]
蜡笔小新 2024-12-28 11:12:44
-
本教程将深入探讨QBlog开源博客系统的Page_Load生命周期，并介绍一种简洁的参数传递重构方法。通过视频演示和详细讲解，帮助开发者更好地理解和应用这些技术。 ...
[详细]
蜡笔小新 2024-12-28 10:39:53
-
本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程，并提供完整的代码示例。 ...
[详细]
蜡笔小新 2024-12-28 09:49:42
-
本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境（IDE），涵盖Windows、macOS和Linux系统，同时提供详细的安装步骤及配置建议。 ...
[详细]
蜡笔小新 2024-12-28 09:42:41
-
本文总结了2018年的关键成就，包括职业变动、购车、考取驾照等重要事件，并分享了读书、工作、家庭和朋友方面的感悟。同时，展望2019年，制定了健康、软实力提升和技术学习的具体目标。 ...
[详细]
蜡笔小新 2024-12-28 09:10:26
-
在计算机技术的学习道路上，51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域，51CTO学院始终是我信赖的学习平台。 ...
[详细]
蜡笔小新 2024-12-28 08:20:07
-
本文探讨了如何像程序员一样思考，强调了将复杂问题分解为更小模块的重要性，并讨论了如何通过妥善管理和复用已有代码来提高编程效率。 ...
[详细]
蜡笔小新 2024-12-28 01:48:10
-
![python的交互模式怎么输出名文汉字[python常见问题]](https://img1.php1.cn/3cd4a/24cea/978/9f39a0b333a15215.gif)
在命令行模式下敲命令python，就看到类似如下的一堆文本输出，然后就进入到Python交互模式，它的提示符是>>>，此时我们可以使用print() ...
[详细]
蜡笔小新 2024-12-27 21:32:05
-
本题涉及编号为1至n的火星商店，每个商店有一个永久商品价值v。操作包括每天在指定商店增加一个新商品，以及查询某段时间内某些商店中所有商品（含永久商品）与给定密码值的最大异或结果。通过线段树分治和持久化Trie树来高效解决此问题。 ...
[详细]
蜡笔小新 2024-12-27 21:23:11
-
手机用户2502904705
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
-
1mac对比linux编译速度,文件对比 Beyond Compare v4.2.8 (build 23479) for WinMacLinux
-
2Java 中的 DelayQueue toArray()方法，示例
-
3GreenPlum orca优化器在何处产生执行计划并进行分发
-
4使用自定义域名访问本机应用
-
5[杂谈] 15. 鸽巢原理及相关OJ例题
-
6Head First Java(第2版)中文版2 类与对象
-
7MySQL8.0.24内网部署
-
8[Snowflake+Python]Python中如何使用Snowflake
-
9CentOS7下实践查询版本/CPU/内存/硬盘容量等硬件信息
-
10算法分析与设计复习（三）
-
11英文论文（sci）解读复现【NO.5】让RepVGG再次变得更强大：一种量化感知方法
-
12Nginx 安全加固参考建议 —— 筑梦之路
-
13灵活div的背景渐变填充，使用css还是图像？ - Background gradient fill for flexible div's, either using css or images?
-
14用 CSS 实现三角形与平行四边形【HTML】
-
15jstree java_javajsTree通用的树生成代码
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有