需要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 (
<div className="content-inner">
<Table/>
</div>
);
}
}
export default All;
在router.js中定义'/all'路由与all组件的映射
// 子组件
import Welcome from './pages/welcome';
+import All from './pages/all';
export default () => (
<Router>
<div>
<Header/>
<div
className='main-contains'
style={{
minHeight: document.body.clientHeight,
}}
>
<Breadcrumb/>
<Switch>
{/* welcome */}
<Route exact path="/" component={Welcome} />
+ <Route exact path="/all" component={All} />
</Switch>
</div>
</div>
</Router>
);
点击'/all'路由可以看到效果如下
表示all组件已经渲染成功
不过问题是并没有表格头
所有下一步先定义表格头
render() {
//columns为Table组件自带方法
return (
<div className="content-inner">
<Table
+ columns={this.columns}
/>
</div>
);
}
//定义表格
+ 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 (
<Modal
visible = { true }
>
</Modal>
);
}
}
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 (
<div className="content-inner">
+ <Button type ='primary' onClick={ this.addDataSource }> 新建数据</Button>
<Table
columns={this.columns}
/>
<EditModal
+ editVisiable={ editVisiable }
/>
</div>
);
}
//app/public/src/pages/all/edit/index.js
render() {
const { editVisiable } = this.props
return (
<Modal
+ visible = { editVisiable }
>
</Modal>
);
}
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 (
<div className="content-inner">
<Button type ='primary' onClick={ this.addDataSource }> 新建数据</Button>
<Table
columns={this.columns}
/>
<EditModal
editVisiable={ editVisiable }
+ onModelCancel={ this.onModelCancel}
/>
</div>
);
}
}
//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 (
<Modal
visible = { editVisiable }
+ onCancel= { onModelCancel }
>
</Modal>
);
}
}
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 (
<Modal
visible = { editVisiable }
onCancel = { onModelCancel }
+ onOk = { this.onOk }
>
+ <Form>
+ <FormItem
+ label="姓名"
+ {...formLayout}
+ >
+ {getFieldDecorator('name', {
+ rules: [{
+ required: true, message: '姓名必填',
+ }],
+ })(
+ <Input />
+ )}
+ </FormItem>
+ <FormItem
+ label="年龄"
+ {...formLayout}
+ >
+ {getFieldDecorator('age', {
+ rules: [{
+ required: true, message: '姓名必填',
+ }],
+ })(
+ <Input />
+ )}
+ </FormItem>
+ <FormItem
+ label="住址"
+ {...formLayout}
+ >
+ {getFieldDecorator('address', {
+ rules: [{
+ required: true, message: '住址必填',
+ }],
+ })(
+ <Input />
+ )}
+ </FormItem>
+ </Form>
</Modal>
);
}
}
//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 (
<div className="content-inner">
<Button type ='primary' onClick={ this.addDataSource }> 新建数据</Button>
<Table
columns = {this.columns}
dataSource={dataSource}
/>
<EditModal
editVisiable={ editVisiable }
onModelCancel={ this.onModelCancel}
+ saveData = { this.saveData }
/>
</div>
);
}
//定义表格
columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}];
}
export default All;
这里都写了备注,就不详细说明了
网友评论