react+ant design实现Table的增、删、改的示例代码

本人小白一名，第一次学习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(  <ExampleTable/>,  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)=>(        <span>           <Popconfirm title="删除不可恢复，你确定要删除吗?" >                <a title="用户删除" className="mgl10"onClick={this.onDelete.bind(this,index)}>                  <Icon type="delete"/></a>           </Popconfirm>          <span className="ant-divider"/>          <UserDetails className="user_details" pass={record}/>        </span>      ) },    ];    }   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 (      <div className="div_body">       <div id="div_left"></div>       <div id="div-right">         <div className="table_oftop">           <Button type="primary" icon="search" style={{float:"right",marginLeft:10}}>查询</Button>           <Input placeholder="input search text" style ={{width:300,float:"right"}}/>           <div id="add_delete">           <Button type="primary" className="selectedDelete" onClick={this.handleSelectedDelete}>删除所选</Button>           <AddUser className="add_user_btn" callback={this.appendPerson}/>           </div>         </div>        <Table columns={this.columns}            dataSource={this.state.dataSource}            className="table"            rowSelection={rowSelection}            scroll ={{y:400}}/>       </div>      </div>    );  }}module.exports = ExampleTable;