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 相关文章推荐
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
jquery动态添加option示例
Dec 30 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
常用jQuery代码分享
Jul 14 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
深入学习JavaScript中的bom
May 27 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
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面试常用算法(推荐)
2016/07/22 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
javascript 面向对象封装与继承
2014/11/27 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
浅谈function(函数)中的动态参数
2017/04/30 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
合同专员岗位职责
2013/12/18 职场文书
新闻稿件写作范文
2015/07/18 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android