首先介紹一下整體的樣式及實現的效果
如圖所示，點擊添加按鈕會接着后面新增一行，點擊操作下的刪除圖標將會刪掉一行，如果刪掉序號為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>）,綠色的為我們剛剛寫組件的路徑。