localStorage 在react form表单中的应用

sotreSg.js

关于 sotre发 set get 和 remove

export const setStore = (name, content) => {
    if (!name) return;
    if (typeof content !== 'string') {
        content = JSON.stringify(content);
    }
    window.localStorage.setItem(name, content);
}

/**
 * 获取localStorage
 */
export const getStore = name => {
    if (!name) return;
    let nowStore =  window.localStorage.getItem(name);
    if(nowStore){
        return JSON.parse(nowStore)
    }else {

    }
   
}

/**
 * 删除localStorage
 */
export const removeStore = name => {
    if (!name) return;
    window.localStorage.removeItem(name);
}

组件中使用

1. 引入

import { setStore, getStore, removeStore } from '_s/libs/storeSg.js'
声明
const [form] = Form.useForm();

2. setStore

在 react antdesign 模版中

form表单

  <Form
                            className='wk_receivable_query'
                            layout='inline'
                            form={form}
                            colon={true}
                            initialValues={{ is_equal: '1' }}
                            onFinish={onFinish}
                        >
                            <Form.Item
                                label="所属slect1"
                                name="group_id"
                                style={{ marginBottom: "10px" }}
                            >
                                <Select placeholder="请选择"
                                    showSearch
                                    allowClear style={{ width: '120px' }}
                                    optionFilterProp="label"
                                    onChange={(value) => handleGetCustomer(value)}
                                    filterOption={filterOption}
                                >
                                    {getOptions(groupList)}
                                </Select>
                            </Form.Item>
                            </Form>

3. onFinsh()

    // 查询
    const onFinish = (values: any) => {
        console.log('values', values)
        let times = {
            start_time: '',
            end_time: '',
            order_start_time: '',
            order_end_time: '',
        }
        let actual_delivery_time = []
        // 创建时间  更新为年月日
        if (values['order_ctime']) {
            times.start_time = values['order_ctime'][0].format('YYYY-MM-DD'); // 将第一个 Moment 对象转换为 '年月日' 格式的字符串
            times.end_time = values['order_ctime'][1].format('YYYY-MM-DD'); // 将第二个 Moment 对象转换为 '年月日' 格式的字符串
        }
        //    订单发起时间、 更新为年月日
        if (values['order_ctime_arr']) {
            times.order_start_time = values['order_ctime_arr'][0].format('YYYY-MM-DD'); // 将第一个 Moment 对象转换为 '年月日' 格式的字符串
            times.order_end_time = values['order_ctime_arr'][1].format('YYYY-MM-DD'); // 将第二个 Moment 对象转换为 '年月日' 格式的字符串
        }
        // 实际交付时间
        if (values['actual_delivery_time_arr']) {
            actual_delivery_time[0] = values['actual_delivery_time_arr'][0].format('YYYY-MM-DD')
            actual_delivery_time[1] = values['actual_delivery_time_arr'][1].format('YYYY-MM-DD')
        }
        params = Object.assign(values, times, { actual_delivery_time: actual_delivery_time })
        // 设置导出的url 携带查询参数
        setHref(`/admin/sales/bill/receivables/export?${qs.stringify(params)}`)
       
       // 设置 存储的数据。【demo为存储form表单和3个select的list 下拉表格】
        let paramsObj = { values: params, groupList: groupList, customerList: customerList, projectList: projectList }
        setStore('myquery', paramsObj)
// 向父组件的表格传参
        getParams({ values: params, tab: modalCheck })
    };

  useEffect(() => {
        const nowData = getStore('myquery');
        console.log('nowData', nowData)
        if (nowData && nowData.values) {
            let fieldValue: any = {}
            let nowValues = nowData.values
            if (nowData.groupList && nowData.groupList.length > 0) {
                setGroupList(nowData.groupList)
            }
            if (nowData.customerList && nowData.customerList.length > 0) {
                setCustomerList(nowData.customerList)
            }

            if (nowData.customerList && nowData.customerList.length > 0) {
                setProjectList(nowData.projectList)
            }

            if ((nowValues['start_time'] || nowValues['end_time'])) {
                if (nowValues['order_ctime'] && nowValues['order_ctime'].length > 0) {
                    fieldValue.order_ctime = [moment(nowValues['start_time']), moment(nowValues['end_time'])]
                }

            }
            console.log(fieldValue)
            let lastData = {
                ...nowValues,
                order_ctime: fieldValue.order_ctime
            }
            form.setFieldsValue(lastData)
            form.submit()
        } else {
            runSearch()
            onFinish({})
        }


        return () => {
            removeStore('myquery')
        }
    }, [])

5. 销毁组件 移除

removeStore('myquery')

6. 总结

这就是个大概思路问题。 总觉得还有很多的问题 。还要跟进项目的实际情况修改。 emo 。 如果有哪位大佬有好的意见或者有需要改成的地方。欢迎留言