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

 更新时间:2022年08月04日 16:47:27   作者:莫尔道嘎老范  
这篇文章主要介绍了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项目中使用Redux

    详解如何优雅地在React项目中使用Redux

    这篇文章主要介绍了详解如何优雅地在React项目中使用Redux,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • React 三大属性之state的使用详解

    React 三大属性之state的使用详解

    这篇文章主要介绍了React 三大属性之state的使用详解,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • React高级特性Context万字详细解读

    React高级特性Context万字详细解读

    React的context就是一个全局变量,可以从根组件跨级别在React的组件中传递。React context的API有两个版本,React16.x之前的是老版本的context,之后的是新版本的context
    2022-11-11
  • ios原生和react-native各种交互的示例代码

    ios原生和react-native各种交互的示例代码

    本篇文章主要介绍了ios原生和react-native各种交互的示例代码,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • React Hooks: useEffect()调用了两次问题分析

    React Hooks: useEffect()调用了两次问题分析

    这篇文章主要为大家介绍了React Hooks: useEffect()调用了两次问题分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • React 路由使用示例详解

    React 路由使用示例详解

    这篇文章主要介绍了React 路由使用,使用路由时需要为组件指定一个路由的path,最终会以path为基础,进行页面的跳转,具体使用先看个简单示例,该示例比较简单就是两个Tab页面的来回切换
    2022-05-05
  • 最新版React Native环境搭建(亲测)

    最新版React Native环境搭建(亲测)

    这篇文章主要介绍了最新版React Native环境搭建,React Native的运行需要依赖原生Android和iOS环境,因此需要分别安装原生Android和iOS的开发环境,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • react-native组件中NavigatorIOS和ListView结合使用的方法

    react-native组件中NavigatorIOS和ListView结合使用的方法

    这篇文章主要给大家介绍了关于react-native组件中NavigatorIOS和ListView结合使用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-09-09
  • react如何向数组中追加值

    react如何向数组中追加值

    这篇文章主要介绍了react如何向数组中追加值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 教你应用 SOLID 原则整理 React 代码之单一原则

    教你应用 SOLID 原则整理 React 代码之单一原则

    这篇文章主要介绍了如何应用 SOLID 原则整理 React 代码之单一原则,今天,我们将从一个糟糕的代码示例开始,应用 SOLID 的第一个原则,看看它如何帮助我们编写小巧、漂亮、干净的并明确责任的 React 组件,需要的朋友可以参考下
    2022-07-07

最新评论