本人小白一名,第一次学习反应,该资料为本人原创,采用的是反应+蚂蚁设计的提出的一个小演示,暂时只实现了增加,删除单行,多行删除有错误,查看详情,呕心沥血耗时一周完成,禁止抄袭,转载请先留言,
1, main.jsx
从“反应”进口的反应;
从“进口ReactDom react-dom ';
从“进口ExampleTable。/ExampleTable.jsx '
ReactDom.render (
& lt; ExampleTable/比;
. getelementbyid (“AppRoot”)
);
2 ExampleTable.jsx,注:记住引入antd。css,否则表组件无法正常显示。
从“反应”进口的反应;
进口{表,按钮,输入,图标,Popconfirm,警报}“antd”;
从“进口AddUser。/AddUser.jsx '
从“进口UserDetails。/UserDetails.jsx '
类ExampleTable延伸反应。组件{
构造函数(道具){//构造函数
超级(道具);
这一点。状态={
数据源:[
{:关键:1、国家免疫日1,名字:“选项卡”,性别:男,年龄:22日schoolname:“第一中学”,描述:“热爱班级活动,尊敬老师”},
{:关键:2,国家免疫日2,名字:“转变”,性别:男,年龄:22日schoolname:“第一中学”,描述:“热爱班级活动,尊敬老师”},
{:关键:6日国家免疫日6,名字:ctrl,性别:男,年龄:22日schoolname:“第一中学”,描述:“热爱班级活动,尊敬老师”},
:{关键:4,国家免疫日4,名字:“大写锁定”,性别:男,年龄:22日schoolname:“第一中学”,描述:“热爱班级活动,尊敬老师"},
:{关键:5,国家免疫日5名:“输入”,性别:女,年龄:22日schoolname:“第一中学”,描述:“热爱班级活动,尊敬老师'}
),
指数:”,
PersonCount: 0,
selectedRowKeys: [],
selectedRows: [],
记录:“abc”
}；
这一点。onDelete=this.onDelete.bind(这);//绑定这声明该方法需要绑定,直接在onClick中调用
这一点。appendPerson=this.appendPerson.bind(这个);
这一点。handleSelectedDelete=this.handleSelectedDelete.bind(这个);
这一点。列=[
{标题:“编”号,dataIndex:”“国家免疫日,关键:”“国家免疫日,宽度:“8%”},
{标题:“姓名”,dataIndex:“名字”,关键:“名字”,宽度:“15%”},
{标题:性别”,dataIndex:‘性别’,关键:“性别”,宽度:“10%”},
{标题:“年龄”,dataIndex:“年龄”,关键:“年龄”,宽度:‘15%’,},//渲染:(文本、记录索引)=比;(Math.floor (record.age/10)) * 10 +“多岁"},
{标题:“学校”,dataIndex:‘schoolname’,关键:“schoolname”,宽度:“15%”},
{标题:“在校表现,dataIndex:“描述”,关键:“描述”,宽度:“20%”},
{标题:“操”作dataIndex:“关键:“操作”,宽度:“32%”,呈现:(文本、记录索引)=祝辞(
& lt; span>
& lt; Popconfirm title=吧境豢苫指?你确定要删除吗& # 63;”比;
& lt;一个标题="用户删除“className=" mgl10 " onClick={this.onDelete.bind(这个指数)}祝辞
& lt;图标类型=癲elete”/祝辞& lt;/a>
& lt;/Popconfirm>
& lt;跨度className=" ant-divider "/比;
& lt; UserDetails className=" user_details "通过={记录}/比;
& lt;/span>
)},
];
}
appendPerson(事件){//得到子元素传过来的值
让=[]数组;
让数=0;
this.state.dataSource。forEach(函数(元素){
种(元素)。一些(函数(关键){
“如果(键==='国家免疫日){
数+ +;
[数]=element.nid数组
}
}）
}）
让sortData=https://www.yisu.com/zixun/array.sort();//对遍历得到的数组进行排序
让MaxData=sortData [1] (this.state.dataSource.length)//取最后一位下标的值
event.key=MaxData + 1;
事件。nid=MaxData + 1;
this.setState ({
数据源(…this.state.dataSource、事件):
}）
}>
& lt; div id=癲iv-right”比;
& lt; div className=皌able_oftop”比;
& lt;按钮类型=俺跫丁蓖急?八阉鳌狈绺?{{浮动:“正确”,marginLeft: 10}}在查询& lt;/Button>
& lt;输入占位符=笆淙胨阉魑谋尽胺绺?{{宽度:300年,浮动:“正确”}}/比;
& lt; div id=癮dd_delete”比;
& lt;按钮类型=爸鳌眂lassName=皊electedDelete”回调={this.appendPerson}/比;
& lt;/div>
& lt;/div>
& lt;表列={this.columns}
数据源={this.state.dataSource}
className="表"
rowSelection={rowSelection}
滚动={{y: 400}}/比;
& lt;/div>
& lt;/div>
);
}
}
模块。出口=ExampleTable;
