react把表格渲染好ui_react新手入门教程03-纯前端渲染table+弹窗

此处输入图片的描述

需要antd中两个组件:

1.Modal

2.Table

样式引入

表格

弹窗

表格

整个组件放在'/all'这个路由下

所以在pages文件夹下新建all文件夹, 在all文件夹中新建index.js

并引入antd中Table组件

//app/public/src/pages/all/index.js

import React, { Component } from 'react';

import { Table } from 'antd'

class All extends Component {

constructor(props) {

super(props);

this.state = {

}

}

render() {

return (

);

}

}

export default All;

在router.js中定义'/all'路由与all组件的映射

// 子组件

import Welcome from './pages/welcome';

+import All from './pages/all';

export default () => (

className='main-contains'

style={{

minHeight: document.body.clientHeight,

}}

>

{/* welcome */}

+

);

点击'/all'路由可以看到效果如下

表示all组件已经渲染成功

此处输入图片的描述

不过问题是并没有表格头

所有下一步先定义表格头

render() {

//columns为Table组件自带方法

return (

+ columns={this.columns}

/>

);

}

//定义表格

+ columns = [{

+ title: '姓名',

+ dataIndex: 'name',

+ key: 'name',

+ }, {

+ title: '年龄',

+ dataIndex: 'age',

+ key: 'age',

+ }, {

+ title: '住址',

+ dataIndex: 'address',

+ key: 'address',

+ }];

}

export default All;

弹窗

弹窗属于编辑操作,所以把它作为all组件的子组件

在all文件夹中新建edit文件夹,并在edit中新建index.js

编辑edit/index.js文件, 引入antd中的Modal组件

设置visible = true 默认显示弹窗

//app/public/src/pages/all/edit/index.js

import React, { Component } from 'react';

import { Modal } from 'antd'

class EditModel extends Component {

constructor(props) {

super(props);

this.state = {

}

}

render() {

//visible为Modal组件自带方法

return (

visible = { true }

>

);

}

}

export default EditModel;

效果

此处输入图片的描述

不过目前弹窗还不可以控制,

所以下一步, 给visible的值设个变量,来控制弹窗的显示和关闭

并在all/index.js 中加入一个Button,通过onClick来改变visible的值

点击button显示弹窗

//app/public/src/pages/all/index.js

import React, { Component } from 'react';

+import { Button, Table } from 'antd'

//子组件

import EditModal from './edit'

class All extends Component {

constructor(props) {

super(props);

this.state = {

+ editVisiable:false,

}

}

//显示弹窗

+ addDataSource = () =>{

+ this.setState({

+ editVisiable:true,

+ })

+ }

render() {

+ const { editVisiable } = this.state

return (

+ 新建数据

columns={this.columns}

/>

+ editVisiable={ editVisiable }

/>

);

}

//app/public/src/pages/all/edit/index.js

render() {

const { editVisiable } = this.props

return (

+ visible = { editVisiable }

>

);

}

export default EditModel;

取消弹窗

这里值得注意的一点是:

基于react单向数据流的特点,

子组件改变父组件中state的值时,

通常的做法是,通过父组件传递改变state的方法给子组件,子组件调用这个方法实现:

//app/public/src/pages/all/index.js

class All extends Component {

constructor(props) {

super(props);

this.state = {

editVisiable:false,

}

}

//显示弹窗

addDataSource = () =>{

this.setState({

editVisiable:true,

})

}

+ //取消弹窗

+ onModelCancel = () =>{

+ this.setState({

+ editVisiable:false,

+ })

+ }

render() {

const { editVisiable } = this.state

return (

新建数据

columns={this.columns}

/>

editVisiable={ editVisiable }

+ onModelCancel={ this.onModelCancel}

/>

);

}

}

//app/public/src/pages/all/edit/index.js

class EditModel extends Component {

constructor(props) {

super(props);

this.state = {

}

}

render() {

//onCancel为Modal组件自带方法

+ const { editVisiable, onModelCancel } = this.props

return (

visible = { editVisiable }

+ onCancel= { onModelCancel }

>

);

}

}

export default EditModel;

数据交互

需要的组件基本完成,就差弹窗中数据输入的表单组件,

表单

添加表单组件, 并引入相关逻辑,

//app/public/src/pages/all/edit/index.js

import React, { Component } from 'react';

+import { Modal, Form, Input } from 'antd'

+const FormItem = Form.Item;

+// 样式

+const formLayout = {

+ labelCol: {

+ xs: { span: 6 },

+ sm: { span: 6 },

+ },

+ wrapperCol: {

+ xs: { span: 6 },

+ sm: { span: 15 },

+ },

+};

class EditModel extends Component {

constructor(props) {

super(props);

this.state = {

+ key:0,

}

}

+ onOk = () => {

+ const { onModelCancel, saveData} = this.props

+ //getFieldsValue() 获取表单中输入的值

+ const { getFieldsValue, resetFields } = this.props.form

+ const values = getFieldsValue()

+ //antd table需要加一个key字段

+ const key = this.state.key + 1

+ this.setState({

+ key:key,

+ })

+ values.key = key

+

+ //重置表单 (坑点)

+ resetFields()

+ saveData(values)

+ onModelCancel()

+ }

render() {

const { editVisiable, onModelCancel } = this.props

+ // getFieldDecorator用于定义表单中的数据

+ const { getFieldDecorator } = this.props.form

return (

visible = { editVisiable }

onCancel = { onModelCancel }

+ onOk = { this.onOk }

>

+

+

+ label="姓名"

+ {...formLayout}

+ >

+ {getFieldDecorator('name', {

+ rules: [{

+ required: true, message: '姓名必填',

+ }],

+ })(

+

+ )}

+

+

+ label="年龄"

+ {...formLayout}

+ >

+ {getFieldDecorator('age', {

+ rules: [{

+ required: true, message: '姓名必填',

+ }],

+ })(

+

+ )}

+

+

+ label="住址"

+ {...formLayout}

+ >

+ {getFieldDecorator('address', {

+ rules: [{

+ required: true, message: '住址必填',

+ }],

+ })(

+

+ )}

+

+

);

}

}

//Form.create()传入表单的方法给EditModel

+ export default Form.create()(EditModel);

//app/public/src/pages/all/index.js

import React, { Component } from 'react';

import { Button, Table } from 'antd'

//子组件

import EditModal from './edit'

class All extends Component {

constructor(props) {

super(props);

this.state = {

editVisiable:false,

+ dataSource:[],

}

}

//显示弹窗

addDataSource = () =>{

this.setState({

editVisiable:true,

})

}

//取消弹窗

onModelCancel = () =>{

this.setState({

editVisiable:false,

})

}

+ //储存数据

+ saveData = (updateData) => {

+ const { dataSource } = this.state

+ dataSource.push(updateData)

+ this.setState({

+ dataSource:dataSource,

+ })

+ }

render() {

+ // editVisiable控制弹窗显示, dataSource为tabale渲染的数据

+ const { editVisiable, dataSource } = this.state

return (

新建数据

columns = {this.columns}

dataSource={dataSource}

/>

editVisiable={ editVisiable }

onModelCancel={ this.onModelCancel}

+ saveData = { this.saveData }

/>

);

}

//定义表格

columns = [{

title: '姓名',

dataIndex: 'name',

key: 'name',

}, {

title: '年龄',

dataIndex: 'age',

key: 'age',

}, {

title: '住址',

dataIndex: 'address',

key: 'address',

}];

}

export default All;

这里都写了备注,就不详细说明了