react中useState使用:如何实现在当前表格直接更改数据


Posted in Javascript onAugust 05, 2022

如何实现在当前表格直接更改数据

需求

用户点击修改按钮时直接在弹出框的当前页面内直接再次修改点击行相关信息:

react中useState使用:如何实现在当前表格直接更改数据

效果如下

react中useState使用:如何实现在当前表格直接更改数据

点击修改当事人信息时,直接将当前改为输入框,并将信息展示,同时操作栏内的内容变为保存和取消;

具体做法

我这里是使用的antd组件内的可编辑表格;当然原生的也可以做,以前也做过;

这里的关键是点击修改按钮时,令当前行的表格变为输入框,并展示数据;

给数据每一项加上 editable: true属性,并通过该属性控制 渲染的是数据还是可修改的输入框

这里是使用的useState()方法来进行状态控制的;

  • 关于 useState 的用法是,需要传入一个参数作为状态的初始值,当函数执行后会返回两个值,一个是当前状态的属性,一个是修改状态的方法。
  • 使用方法更新数据后会触发render()重新渲染数据
const [editingKey, setEditingKey] = useState('');
    // 是否正在修改
    const isEditing = (record: Item) => record.key === editingKey;
    // 修改按钮
    const edit = (record: Item) => {
        form.setFieldsValue({ ...record });
        setEditingKey(record.key);
    };
    // 取消
    const cancel = () => {
        setEditingKey('');
    };
    // 保存
    const save = async (id: React.Key) => {
        try {
            const row = (await form.validateFields())
            console.log('row', row)
            row.id = id
            onSave(row)
            setEditingKey('');
        } catch (err) {
            console.log(err)
        }
    };

我这里给useState一个初始值为空,点击修改后使用setEditingKey()方法(useState返回的方法)将useState数据的值赋值为当前行的唯一key值,这样二者相等,就可以区别点击的是哪一条数据的按钮了;点击取消setEditingKey(’’)重新置空;

判断逻辑:

// 是否正在修改
    const isEditing = (record: Item) => record.key === editingKey;

渲染数据前进行判断:

const mergedColumns = columns.map(col => {
        if (!col.editable) {
            return col;
        }
        return {
            ...col,
            onCell: (record: Item) => ({
                record,
                dataIndex: col.dataIndex,
                title: col.title,
                editing: isEditing(record),
            }),
        };
    });

根据数据状态判断渲染的是表格合适输入框:

const EditableCell: React.FC<EditableCellProps> = ({
    editing,
    dataIndex,
    title,
    record,
    index,
    children,
    ...restProps
}) => {
    return (
        <td {...restProps}>
            {editing ? (
                <Form.Item
                    name={dataIndex}
                    style={{ margin: 0 }}
                    rules={[
                        {
                            required: true,
                            message: `请填写${title}!`,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
            ) : (
                    children
                )}
        </td>
    );
};

导出:

return (
        <Form form={form} component={false}>
            <Table
                components={{
                    body: {
                        cell: EditableCell,
                    },
                }}
                bordered
                pagination={false}
                dataSource={dataSource}
                {...otherProps}
                columns={mergedColumns}
                rowClassName="editable-row"
            />
        </Form>
    );

其中dataSource为数据源,

react中useState使用:如何实现在当前表格直接更改数据

功能实现。

useState修改对象的字段

首先定义一个空对象

const [dataSelect, setDataSelect] = React.useState({})

给这个对象附上不同值,但不会把原来的覆盖的掉

const select = (e, item, type) => {
    const data = { ...dataSelect }
    if (type == 'price') {
      setSelectNO(e)
      data.min_price = item.min_price
      data.max_price = item.max_price
      setDataSelect(data)
      console.log(data)
      return
    }
    if (type == 'optionsCity') {
      setCity(e)
      data.city = item.text
      setDataSelect(data)
      console.log(data)
      return
    }
  }

原理用一个第三方的值,作为中间变量。每次都是附上最新的data。

react中useState使用:如何实现在当前表格直接更改数据

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
pnpm对npm及yarn降维打击详解
Aug 05 #Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 #Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 #Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 #Javascript
canvas 中如何实现物体的框选
Aug 05 #Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 #Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 #Javascript
You might like
?算你??的 PHP 程式大小
2006/12/06 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
详解Python中的文本处理
2015/04/11 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python处理文本换行符实例代码
2018/02/03 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
中国宠物用品商城:E宠商城
2016/08/27 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Java 超详细讲解hashCode方法
2022/04/07 Java/Android