React + ES6 +ant design implements a simple demo table to add delete

First introduce the overall style and the effect of the implementation

, click the Add button will be followed by a new line, click on the delete icon will delete a row, if the number is deleted 1, the second line automatically becomes the first row ordinal will also change.

PS: Data interaction is not yet implemented.

Introduction Finished: The following topic!

1. Layout

Import React, {Component, proptypes} from ' React ';
Import {Table, DatePicker, Select, Inputnumber, Input, Button, Icon} from ' antd ';//references to components in ant design need to be referenced here, such as: I used the Table,da Components such as tepicker need to be referenced here, otherwise the component will not be found.
Import selects from './demo2select ';//A component class reference that you define, not defined, has an example in ant design and can be copied directly in ant design

Class Details extends a details class defined in Component {//ES6
Constructor (props) {//constructor
Super (props);
This.state = {

Initialize, initial first row of data

DataSource: [{
datatime:this.props.datatime,//here the this.props.datatime can be directly assigned here, the value assigned here is the initial value, it will be displayed in the text box, the following similarly
Applytype:this.props.applytype,
Applyproject:this.props.applyproject,
Money:this.props.money,
Operation:this.props.operation,
}],
};
This.handleadd = This.handleAdd.bind (this);//Bind This, this is the method of declaring the onclick below, binding this, in the OnClick event directly with the This.handleadd can be
This.handledel = This.handleDel.bind (this);
}
Add to
Handleadd () {
Const NEWDATASOURCE = this.state.datasource;//assigns This.state.dateSource to Newdatasource

Newdatasource.push ({//newdatasource.push A new array, this array will copy the array directly from the initialization.
Datatime:this.props.datatime,
Applytype:this.props.applytype,
Applyproject:this.props.applyproject,
Money:this.props.money,
Operation:this.props.operation,
});
This.setstate ({
datasource:newdatasource,//will newdatasource the newly added array to DataSource
});
}

Delete
Handledel () {
Const DELDATASOURCE = This.state.dataSource;
Deldatasource.splice (Event.target.getAttribute ('Data-index'), 1);//data-index to get the index, the next 1 is to remove a few lines at a time
This.setstate ({
Datasource:deldatasource,
});
}
Render () {
Console.log (This.state.dataSource);
Const COLUMNS = [{
Title: ' Serial Number ',
Dataindex: ' Key ',
Key: ' Key ',
Render: (text, record, index) = = {
The return <span>{index + 1}</span>//index is zero-based, so the first behavior Index+1,index is the parameter inside the Render method, which automatically gets to the subscript, which is explained in ant design. can refer to
},
}, {
Title: ' Date ',
Dataindex: ' Datatime ',
Key: ' Datatime ',
Render: () = <datepicker/>,//DatePicker for Components
}, {
Title: ' Reimbursement type ',
Dataindex: ' Applytype ',
Key: ' Applytype ',
Render: () = <selects/>
}, {
Title: ' Reimbursement Items ',
Dataindex: ' Applyproject ',
Key: ' Applyproject ',
Render: () = <input placeholder= "reimbursement item"/&GT;
}, {
Title: ' Amount ',
Dataindex: ' Money ',
Key: ' Money ',
Render: () = <inputnumber min={0.00} max={10000} step={0.1}/>
}, {
Title: ' Operation ',
Dataindex: ' Operation ',
Key: ' Operation ',
Render: (text, record, index) = = {
return <icon type= "Delete" Data-index={index} Onclick={this.handledel}/>//data-index now to get index subscript, The deletion data-index above is the subscript for index
},
}];
Return (
<div>
<icon type= "book" Classname= "Ant-icon"/>
<span classname= "Ant-title" > Reimbursement Details </span>
<table Datasource={this.state.datasource} columns={columns}//This.state.dataSource is the datasource array to get initialized
Pagination={false} bordered
/>
<button onclick={this.handleadd}> Add </button>
</div>
);
}
}

Property type

Details.proptypes = {

};

Initial data
Details.defaultprops = {

}
Export default Details;

Finally, you need to import a reference in the portal file, and Reactdom.render () renders it to the browser.

such as: Import demo2over from '. /components/demo2over ';

Reactdom.render (<demo2over/>, document.getElementById (' root '));

Note: The yellow background should be the same place, the red background is the name of the ID that renders to the browser page (for example: <div id= "root" ></div>), green for the path we just wrote the component.

React + ES6 +ant design implements a simple demo table to add delete