浅谈前端表单中的增、删、改操作

[
{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是 引用传递过来的变量
• 前端在进行增|删|改操作时，不需要额外的行的唯一性标识