基于Ant Design的React注册功能Demo

编辑 import React, { Component } from "react"; import { Form, Input, Table, Button } from "antd"; const registerFormItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 12 }, }; class Register extends Component{ //这里声明用户信息列表（columns）及用户数据dataSource 以及一个isModify标志 在注册表单与编辑表单之间来回切换时方便使用 state={ columns : [ // 申明columns数组 由于展示的内容是本文件外的 先声明 后面会有详情 每一项都为一个对象             {title:'姓名', dataIndex:'name', key:'name'},                   {title:'性别', dataIndex:'sex', key:'sex'},                   {title:'年龄', dataIndex:'age', key:'age'},              {title:"功能",dataIndex:"",key:"x", render:(text)=> <Button>修改/删除</Button>} //render只是对当前对应信息进行展示。可以在Table 里传入function 来 覆盖这个TD中的内容 这里使用button代替 不然就留出Td 但是不做任何处理 ] ,//PlainDataSource ：存储原始数据       dataSource:[], //这里存储真正需要Render的数据，也就是根据colums中包含的key 和 value 来生成            isModify : false ,// 这里考虑有两种Mode 注册+ 编辑 这里通过一个布尔值来区分 Modify的时候也需要将formItemLayout 更新一遍     } 2.Form表单 处理   onFinish={this.handleSubmit} // antd 4.0函數式API之 handleFinish() 介入 onFinish 裏i           form = this.state.isModify? (                                 //如果ismodify True 继承物Ismodif= true                                                                       <Form  form Item Layout={register form Item Layout} initial Values ={{ Name :this .state .currentUser .name                                                           }} on Finish={this handle Submit}>) : ( *******波浪Object******* < Form form Item Layout={register Form Item layout } >); 3 */ /* table 衋样 processing */ columns= this .state .Columns ;                datasource = this state Data source ;               const expanded Row Render = record =>< p > content < /p>; 4 return () return ( <div> Regist Form {form} Deatils Table <Table expandedRowRender={expandedRowRender } datasource=${datasource} Column s=${col mun s})}}< /Table > ) }}