table表单的修改和保存

最新推荐文章于 2023-10-18 16:20:53 发布

wengqt

最新推荐文章于 2023-10-18 16:20:53 发布

阅读量5.4k

点赞数 1

分类专栏：智库项目 js 前端开发 React 文章标签： JavaScript table antdesign react

本文链接：https://blog.youkuaiyun.com/wengqt/article/details/80474455

版权

本文介绍了在React应用中使用AntDesign表格组件实现数据编辑和保存的功能。通过创建临时变量temp存储修改内容，利用onBlur和onChange事件处理修改逻辑，允许用户在点击保存前撤销修改。此外，添加了修改按钮，只有在修改状态下点击保存才会提交数据。整个过程通过state管理修改状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在修改展示文件信息和用户信息的表单，需求是能够点击按钮来修改，同时不影响数据的展示。

最开始，我直接将可以修改的部分直接存放到输入框中，简单粗暴，可是非常影响美观，并且有严重的修改逻辑，因为采用的是react框架，并不能用id直接绑定input的节点来获取value，所以每一个可修改的节点都有一个onchange的方法来修改，但是最后的保存按钮并不能控制一整行修改的内容。

因此需要对当前的修改结果进行暂存。此时，当前模块的state中有三项数据：

this.state = {
      result: [],
      changeLine: [],
      temp: []
    }

点input框onblur或者下拉数据框onchange的时候，就会调用modify方法来更改数据并存入temp：

modify(index, type, value) {
    console.log(index, type, value);

      let _temp = JSON.parse(JSON.stringify(this.state.temp));
      _temp[index][type] = value;
      // console.log(_temp[index])
      this.setState({
        temp: _temp
      })


  }

上面参数：index为该条数据的key值，也就是数据的第几项，type指的是修改数据的项名，value指的是修改后的值。在每一项修改之后都将这些数据保存到temp暂存，点击下一个框修改的时候便在暂存的基础上修改。现在就有个问题，如果我不想修改了怎么办？

在这里，我将对输入框的内容进行判断，如果为空，那么就使用原来的数据作为value值：

<Input type='text' size='small' style={
  { width: '100px' }} placeholder={val} onBlur={
(e)=>{
let v = e.target.value.trim()==''?e.target.placeholder:e.target.value;
this.modify(line.key,'username',v)
    }
}/>

这样，就可以完美解决如果不想修改数据但是已经改过一次的问题，只要在点击保存按钮之前都是可以撤销修改的。

同时，我又加上了修改按钮，刚获取到数据时候，是没有修改框的ÿ