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为数据源,

功能实现。

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的用法React+Antd 实现可增删改表格的示例React 三大属性之state的使用详解解决react中useState状态异步更新的问题

  • 本文相关:
  • create-react-app安装出错问题解决方法
  • 再次谈论react.js实现原生js拖拽效果引起的一系列问题
  • react前端框架实现原理的理解
  • parcel 打包示例(react helloworld)
  • 使用vscode 插件debugger for chrome 调试react源码的方法
  • 回顾javascript react基础
  • react中实现搜索结果中关键词高亮显示
  • react中使用vditor自定义图片详解
  • react native使用fetch实现图片上传的示例代码
  • create-react-app修改为多页面支持的方法
  • React 中,如果state中有一个较深层的值改变了,怎么去setState
  • React 中,如果state中有一个较深层的值改变了,怎么去setState
  • react中getinitialstate中初始化的属性可以用在this.props取出来...
  • 如何清空react中的所有state
  • react怎么修改state数组中的数据
  • React怎么修改state数组中的数据
  • reducer 的参数state是react组件中的state吗
  • 如何替换react router 中location 的state
  • react 数组中的ui state怎么更新
  • react native中getinitialstate是系统函数吗
  • react 中getDefaultProps和getInitialState的区别是什么
  • React中能在子组建中this.setState么
  • react getinitialstate怎么不调用
  • react每次更新state是重新运行render吗
  • React props和state属性的具体使用方法
  • React如何给state.的变量添加样式,让他显示是红色
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库react示例详解react中usestate的用法react+antd 实现可增删改表格的示例react 三大属性之state的使用详解解决react中usestate状态异步更新的问题create-react-app安装出错问题解决方法再次谈论react.js实现原生js拖拽效果引起的一系列问题react前端框架实现原理的理解parcel 打包示例(react helloworld)使用vscode 插件debugger for chrome 调试react源码的方法回顾javascript react基础react中使用vditor自定义图片详解react native使用fetch实现图片上传的示例代码create-react-app修改为多页面支持的方法详解react中传入组件的props改变时更新组件的几种实现vscode配置react开发环境的步骤react-redux中connect的装饰器用法@connreactnative 之flatlist使用及踩坑封装总结详解react native开源时间日期选择器组件(reacreact native实现简单的登录功能(推荐)react-router browserhistory刷新页reactnative之键盘keyboard的弹出与消失示例详解react-router中url参数改变页面不刷新的解决详解各版本react路由的跳转的方法react组件三大属性之state,props,refselectron+react进行通信的方法nginx配置react静态页面的方法教程react-native使用leanclound消息推送的方法react native之prop-types进行属性确认详解react/redux应用使用async/await的方法浅谈react原生app更新react开发中如何使用require.ensure加载es6风格的组件react实现todolist功能react-native 圆弧拖动进度条实现的示例代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved