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 垃圾回收机制分析
Oct 10 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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 Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
php遍历CSV类实例
2015/04/14 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
php获取linux命令结果的实例
2017/03/13 PHP
PHP实现图片压缩
2020/09/09 PHP
YII框架常用技巧总结
2019/04/27 PHP
phpinfo的知识点总结
2019/10/10 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
IE下JS读取xml文件示例代码
2013/08/05 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Django进阶之CSRF的解决
2018/08/01 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
Python通过format函数格式化显示值
2020/10/17 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
存储过程的优点有哪些
2012/09/27 面试题
《赵州桥》教学反思
2014/02/17 职场文书
公司担保书范文
2014/05/21 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js