本文小編為大家詳細(xì)介紹“react表格如何增加”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“react表格如何增加”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供徽州企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站制作、HTML5、小程序制作等業(yè)務(wù)。10年已為徽州眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進(jìn)行中。
react表格增加的實現(xiàn)方法：1、在一個Table.jsx文件中創(chuàng)建兩個class組件；2、在兩個組件外面定義變量；3、創(chuàng)建點擊新增的事件方法代碼為“handleAdd = () => { const { data, editingKey } = this.state;let newData = data;...”即可。
React+antd動態(tài)增加Table可編輯行
根據(jù)antd官網(wǎng)的可編輯表格例子來實現(xiàn)，新增的可編輯的單元格為一個子組件，由Table引入。對于原理理解有限，歡迎探討。
首先，在一個Table.jsx文件中創(chuàng)建了兩個class組件(這里使用hook寫法直接用const也可)，一個子組件EditableCell，父組件Schedule，子組件主要是來設(shè)置可編輯的form元素的。
1、在兩個組件外面先定義變量，功能實現(xiàn)使用的是React.createContext()方法。
const EditableContext = React.createContext();
2、先上可編輯單元格子組件代碼
重慶分公司
重慶分公司
//子組件class EditableCell extends React.Component {
getInput = () => {
const { inputType } = this.props;
let i = 1
if (inputType === 'rq') { //可根據(jù)不同的inputType來顯示不同F(xiàn)orm元素，inputType來源于父組件
return
}else {
return
}
};
renderCell = ({ getFieldDecorator }) => {
const {
editing,
dataIndex,
title,
record,
children,
...restProps } = this.props;
// console.log(record)
return (
{editing ? ( //editing使用父組件傳過來的值，判斷是否為編輯狀態(tài)
{getFieldDecorator(dataIndex, {
rules: [{
required: dataIndex === 'bz' || dataIndex === 'id' ? false : true,
message: `請輸入!`,
},
],
// initialValue: dataIndex && record[dataIndex] ,
initialValue: dataIndex && dataIndex === 'rq' ? (record[dataIndex] ? moment(record[dataIndex]) : null) : record[dataIndex]
})(this.getInput())}
) : (
children )}
);
};
render() {
return {this.renderCell} ;
}}
3、父組件Schedule部分的代碼
class Schedule extends Component {
state = {
data: [],
editingKey: '',
dataSource: {},
}//Table渲染的columns，這里只寫出三列舉例子，在render方法內(nèi)會重組該數(shù)組
columns = [
{
className: "columnHead",
title: '序號',
dataIndex: 'id',
key: 'id',
width: 60,
align: 'center',
render: (text, row, index) => {index + 1}
},
{
className: "columnHead",
title: '日期',
dataIndex: 'rq',
key: 'rq',
align: 'center',
width:100,
editable: true,//editable: true是必須加的，哪一列需要編輯就加在哪列
},
{
className: "columnHead",
title: '從何地至何地',
dataIndex: 'hdzhd',
key: 'hdzhd',
align: 'center',
width:120,
editable: true,
},
{ //該列為操作列，包含編輯、刪除、取消、保存按鈕，下面代碼中的每個方法都在此處定義
className: "columnHead",
title: '操作',
align: 'center',
render: (text, record) => {
const { editingKey } = this.state;
const editable = this.isEditing(record);
return editable ? (
this.cancel(record.id)}> //添加了二次確實提醒
取消
//保存按鈕要用EditableContext包起來
{(form) => (
this.save(form, record.id, record)} style={{ marginRight: 8 }} >保存
)}
) : (
this.edit(record.id)}>編輯
this.delete(record.id)}>
刪除
);
}
}
]
render(){
const components = { //在此處引入可編輯的單元格子組件
body: {
cell: EditableCell,
},
};
//重新處理了一下Table的columns
const columns = this.columns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
//此處的數(shù)據(jù)會傳給子組件
onCell: (record) => ({
record,
inputType: col.dataIndex,
dataIndex: col.dataIndex,
title: col.title,
editing: this.isEditing(record),
}),
};
});
return(
size="small"
style={{ marginTop: 16 }}
bordered
rowKey={(record) => record.id}
dataSource={data}
columns={columns}
scroll={{ x: "calc(620px + 10%)", y: WinHeight - 580 }}
pagination={false}
footer={() => }
/>
)
}}
以上的代碼就是頁面內(nèi)最開始簡單展示的代碼了
圖1
handleAdd = () => { //該方法在Table標(biāo)簽內(nèi)的footer內(nèi)定義
const { data, editingKey } = this.state;
let newData = data;
const id = new Date().toString();
if (newData.length === 0) {
newData.push({
id,
rq: '',
hdzhd: '',
gzdd: '',
nfwdwfdw: '',
gznr: '',
bz: ''
})
} else {
if (editingKey !== '') { //如果上一條還處于編輯狀態(tài)，不可新增
message.error('請先保存');
return;
}
const row = {
id,
rq: '',
hdzhd: '',
gzdd: '',
nfwdwfdw: '',
gznr: '',
bz: ''
};
newData.splice(data.length, 1, row);
}
this.setState({ data: newData, editingKey: id });};
點擊新增后的效果
圖2
此時操作列的兩個操作為“取消”、“保存”
圖2中展示的可編輯的一整行單元格為開頭提到的單元格子組件
如果必填項沒有輸入內(nèi)容，點擊保存會觸發(fā)Form表單必填項的提示信息。
圖3
保存操作的代碼
save(form, key, record) {
const { wsCgtzPjxx, data } = this.state;
form.validateFields((error, row) => {
if (error) {
return;
}
const { data } = this.state;
const newData = [...data];
row.rq = moment(row.rq).format('YYYY-MM-DD') //如果有日期選擇框，要用format轉(zhuǎn)一下
let dataobj = { //接口請求參數(shù)，只寫了幾個
rq: row.rq,
hdzhd: row.hdzhd,
gzdd: row.gzdd,
}
const index = newData.findIndex((item) => key === item.id);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, {
...item,
...row,
});
http.post('單條數(shù)據(jù)保存接口調(diào)用').then(res => {
if (res.code === 200) {
this.initData();//保存后重新獲取了一下表格數(shù)據(jù)
}
})
this.setState({ data: newData, editingKey: '' });
} else {
newData.push(row);
http.post(調(diào)用接口, dataobj).then(res => {
if (res.code === 200) {
this.initData()
}
})
this.setState({ data: newData, editingKey: '' });
}
});}
圖3狀態(tài)下的取消事件代碼
cancel = (key) => {
if (this.state.isedit) {
this.setState({ editingKey: '' });
} else {
if (key.length > 6) {
const { data } = this.state;
const newData = data;
newData.splice(data.length - 1, 1);
this.setState({ data: newData, editingKey: key });
}
this.setState({ editingKey: '' });
}};
數(shù)據(jù)保存之后Table表格展示為圖4
圖4
此時操作列的兩個操作為“編輯”、“刪除”
編輯操作的代碼
edit = (key) => {
this.setState({ editingKey: key, isedit: true });//讓單元格變?yōu)榫庉嫚顟B(tài)};
刪除操作的代碼
delete = (key) => {
const { data } = this.state;
const newData = data;
const index = newData.findIndex((item) => key === item.id);
http.get('調(diào)用刪除接口', { id: key }).then(res => {
this.initData()
})
newData.splice(index, 1);
this.setState({ data: newData, editingKey: '' });};讀到這里，這篇“react表格如何增加”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
