react + es6 +ant design 實現一個簡單demo表格添加刪除

標籤：

首先介紹一下整體的樣式及實現的效果

，點擊添加按鈕會接著後面新增一行，點擊操作下的刪除表徵圖將會刪掉一行，如果刪掉序號為1的行，第二行會自動變成第一行序號也會隨之改變。

ps：資料互動均還未實現。

介紹完畢：下面正題!

1.布局

import React, { Component, PropTypes } from ‘react‘;
import { Table, DatePicker, Select, InputNumber, Input, Button, Icon } from ‘antd‘;//引用了ant design中的組件需在這裡引用，如：我用了table，DatePicker等組件便需要在這裡引用一下，否則將會找不到組件。
import Selects from ‘./demo2Select‘;//自己定義的一個組件類引用，可不定義，在ant design中有樣本可參考，也可直接在ant design中copy過來

class Details extends Component {//es6中定義的一個Details類
constructor(props) {//建構函式
super(props);
this.state = {

//初始化，初始的第一行資料

dataSource: [{
datatime: this.props.datatime,//這裡的this.props.datatime可直接在這裡賦值，在這裡賦的值為初始值，會顯示在文字框中，下面同理
applytype: this.props.applytype,
applyproject: this.props.applyproject,
money: this.props.money,
operation: this.props.operation,
}],
};
this.handleAdd = this.handleAdd.bind(this);//綁定this，這個是下面聲明onClick的方法，需綁定this，在onClick事件中直接用this.handleAdd即可
this.handleDel = this.handleDel.bind(this);
}
//添加
handleAdd() {
const newDataSource = this.state.dataSource;//將this.state.dateSource賦給newDataSource

newDataSource.push({//newDataSource.push一個新的數組，這個數組直接將初始化中的數組copy過來即可
datatime: this.props.datatime,
applytype: this.props.applytype,
applyproject: this.props.applyproject,
money: this.props.money,
operation: this.props.operation,
});
this.setState({
dataSource: newDataSource,//將newDataSource新添加的數組給dataSource
});
}

//刪除
handleDel() {
const DelDataSource = this.state.dataSource;
DelDataSource.splice(event.target.getAttribute(‘data-index‘), 1);//data-index為擷取索引，後面的1為一次去除幾行
this.setState({
dataSource: DelDataSource,
});
}
render() {
//console.log(this.state.dataSource);
const columns = [{
title: ‘序號‘,
dataIndex: ‘key‘,
key: ‘key‘,
render: (text, record, index) => {
return <span>{index + 1}</span>//索引從零開始，所以第一行為index+1，index為render方法裡面的參數，可自動擷取到下標，在ant design裡面有詳情解釋，可參考
},
}, {
title: ‘日期‘,
dataIndex: ‘datatime‘,
key: ‘datatime‘,
render: () => <DatePicker />,//DatePicker為組件
}, {
title: ‘報銷類型‘,
dataIndex: ‘applytype‘,
key: ‘applytype‘,
render: () => <Selects />,
}, {
title: ‘報銷項目‘,
dataIndex: ‘applyproject‘,
key: ‘applyproject‘,
render: () => <Input placeholder="報銷項目" />,
}, {
title: ‘金額‘,
dataIndex: ‘money‘,
key: ‘money‘,
render: () => <InputNumber min={0.00} max={10000} step={0.1} />,
}, {
title: ‘操作‘,
dataIndex: ‘operation‘,
key: ‘operation‘,
render: (text, record, index) => {
return <Icon type="delete" data-index={index} onClick={this.handleDel} />//data-index現在為獲得index的下標，上面的刪除data-index即是擷取index的下標
},
}];
return (
<div>
<Icon type="book" className="ant-icon" />
<span className="ant-title">報銷明細</span>
<Table dataSource={this.state.dataSource} columns={columns}//this.state.dataSource即為擷取初始化dataSource數組
pagination={false} bordered
/>
<button onClick={this.handleAdd}>添加</button>
</div>
);
}
}

//屬性類型

Details.propTypes = {

};

//初始資料
Details.defaultProps = {

}
export default Details;

 

最後，需在入口檔案中import引用，ReactDOM.render()渲染到瀏覽器就好了。

如：import Demo2Over from ‘../components/demo2over‘;

ReactDOM.render(<Demo2Over />, document.getElementById(‘root‘));

需注意：標黃色背景的地方需一樣，紅色背景為渲染到瀏覽器頁面的Id名稱（如：<div id="root"></div>）,綠色的為我們剛剛寫組件的路徑。

react + es6 +ant design 實現一個簡單demo表格添加刪除