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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
javascript验证身份证号
2015/03/03 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
js判断密码强度的方法
2020/03/18 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python实现矩阵转置的方法分析
2017/11/24 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Pyqt5实现英文学习词典
2019/06/24 Python
python监控nginx端口和进程状态
2019/09/06 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
Pytorch之finetune使用详解
2020/01/18 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
教师应聘自荐信范文
2014/03/14 职场文书
学习两会精神心得范文
2014/03/17 职场文书
地道战观后感2000字
2015/06/04 职场文书
旅行社计调工作总结
2015/08/12 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle