此處輸入圖片的描述
需要antd中兩個(gè)組件:
1.Modal
2.Table
樣式引入
- 表格
- 彈窗
表格
整個(gè)組件放在'/all'這個(gè)路由下
所以在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>
);
點(diǎn)擊'/all'路由可以看到效果如下
表示all組件已經(jīng)渲染成功
此處輸入圖片的描述
不過(guò)問(wèn)題是并沒(méi)有表格頭
所有下一步先定義表格頭
render() {
//columns為T(mén)able組件自帶方法
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組件
設(shè)置visible = true 默認(rèn)顯示彈窗
//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;
效果
此處輸入圖片的描述
不過(guò)目前彈窗還不可以控制,
所以下一步, 給visible的值設(shè)個(gè)變量,來(lái)控制彈窗的顯示和關(guān)閉
并在all/index.js 中加入一個(gè)Button,通過(guò)onClick來(lái)改變visible的值
- 點(diǎn)擊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 }> 新建數(shù)據(jù)</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;
- 取消彈窗
這里值得注意的一點(diǎn)是:
基于react單向數(shù)據(jù)流的特點(diǎn),
子組件改變父組件中state的值時(shí),
通常的做法是,通過(guò)父組件傳遞改變state的方法給子組件,子組件調(diào)用這個(gè)方法實(shí)現(xiàn):
//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 }> 新建數(shù)據(jù)</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;
數(shù)據(jù)交互
需要的組件基本完成,就差彈窗中數(shù)據(jù)輸入的表單組件,
表單
添加表單組件, 并引入相關(guān)邏輯,
//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需要加一個(gè)key字段
+ const key = this.state.key + 1
+ this.setState({
+ key:key,
+ })
+ values.key = key
+
+ //重置表單 (坑點(diǎn))
+ resetFields()
+ saveData(values)
+ onModelCancel()
+ }
render() {
const { editVisiable, onModelCancel } = this.props
+ // getFieldDecorator用于定義表單中的數(shù)據(jù)
+ 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,
})
}
+ //儲(chǔ)存數(shù)據(jù)
+ saveData = (updateData) => {
+ const { dataSource } = this.state
+ dataSource.push(updateData)
+ this.setState({
+ dataSource:dataSource,
+ })
+ }
render() {
+ // editVisiable控制彈窗顯示, dataSource為tabale渲染的數(shù)據(jù)
+ const { editVisiable, dataSource } = this.state
return (
<div className="content-inner">
<Button type ='primary' onClick={ this.addDataSource }> 新建數(shù)據(jù)</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;
這里都寫(xiě)了備注,就不詳細(xì)說(shuō)明了
