[
{id: 10, dr: 0, rowNo: 1, chapter: "第1章节",Content: "技术应答内容1"},
{id: 15, dr: 0, rowNo: 2, chapter: "第3章节",Content: "技术应答内容3"},
{id: 16, dr: 0, rowNo: 3, chapter: "第4章节",Content: "技术应答内容4"},
{ }
]
1 新增行
//record为点击[删除]所在行的整个对象数据,
// 形如 {id: 15, dr: 0, rowNo: 2, chapter: "第3章节",techContent: "技术应答内容3"},
handleAddRow = record => {
const { arr} = this.props; // arr 为整个表体的数据,来自props
//检测当前行是否未填写内容
if (!Boolean(record.chapter) || !Boolean(record.Content)) {
alert('请先完善当前行数据!');
return;
}
//新增行 关键代码
arr.push({ });
//强制更新组件
this.forceUpdate();
}
2 删除行(目前比较流行的方案:软删除)
//record为点击[删除]所在行的整个对象数据,
// 形如 {id: 15, dr: 0, rowNo: 2, chapter: "第3章节",techContent: "技术应答内容3"},
handleDelRow = record => {
const { arr} = this.props; // arr 为整个表体的数据,来自props
//确保至少保留一行数据
if (arr.filter(item => item.dr != 1).length === 1) {
alert('请至少保留一行 技术应答项!');
return;
}
//有id的数据行说明来自后台,不可硬删除, dr 为软删除标识,
if (record.id) {
Object.assign(record, { dr: 1});
//或者 arr.filter(item => item === record)[0].dr = 1;
} else { // 对于没有写入后台数据库的数据,则硬删除
const index = arr.findIndex(item => item === record);
arr.splice(index, 1)
}
//强制更新组件
this.forceUpdate();
}
3 修改行
handleValuesChange = (record, obj) => {
Object.assign(record, obj);
this.forceUpdate();
}
4 表单组件render回调
render: (text, record, index) =>
<input
value={ text || '' }
maxLength={ 10 }
onChange={ event=> this.handleValuesChange(record, { chapter: event.target.value } )}
/>
5 总结:
- record是 引用传递过来的变量
- 前端在进行增|删|改操作时,不需要额外的行的唯一性标识