首页 > 其他分享 >ProComponents——ProForm,设置初始值后,点击【重置】按钮,值已清除但页面未更新

ProComponents——ProForm,设置初始值后,点击【重置】按钮,值已清除但页面未更新

时间:2024-09-05 14:52:30浏览次数:13  
标签:status ... 初始值 ProForm formRef onReset onSubmit ProComponents initStatus

 我的问题

umi+antd,使用ProComponents的QueryFilter表单进行列表筛选,首页有个进入列表的快捷跳转,会筛选列表状态(在线1/离线0)。

设置筛选状态初始值为1后,点击【重置】按钮:

1.打印初始值1已清除,但页面上未更新,仍显示筛选在线状态

2.点击2次【重置】按钮,页面才会更新

3.点击下拉框的清除按钮,再点击【重置】按钮,初始值会又变为1

 

首页:

...
<Link to={'/list?status=1'}>列表</Link>
...

 

列表:

 import { useSearchParams } from '@umijs/max'  ...
const [params] = useSearchParams()
  const status = params.get('status') ? Number(params.get('status')) : undefined
...
<FilterForm initStatus={status} onSubmit={e => { setSearchParams({ ...searchParams, ...e, }) }} /> ...

 

 

筛选组件:

import { ProFormSelect, ProFormText, QueryFilter } from '@ant-design/pro-components'

export type FilterFormType = {
  name?: string
  status?: number
}
interface IFilterFormProps {
  initStatus?: number
  onSubmit?: (e: FilterFormType) => void
  onReset?: VoidFunction
}

export default function FilterForm(props: IFilterFormProps) {
  const { initStatus, onSubmit, onReset } = props

  return (
    <QueryFilter<FilterFormType>
      onFinish={async values => {
        onSubmit?.(values)
      }}
      onReset={onReset}
      initialValues={{ status: initStatus }}
      omitNil={false} // 默认为true,会自动清空 null 和 undefined 的数据。解决手动清除下拉框后,查询参数里下拉选项仍存在问题
    >
      <ProFormText name='name' label='名称' placeholder='名称' />
      <ProFormSelect
        name='status'
        label='状态'
        options={[
          { label: '离线', value: 0 },
          { label: '在线', value: 1 },
        ]}
      />
    </QueryFilter>
  )
}

 

 

原因

官网说明:https://ant.design/components/form-cn

 

解决方法

使用formRef、setFieldValue和resetFields

import {
  ProFormInstance,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components'
import { useEffect, useRef } from 'react'

export type FilterFormType = {
  name?: string
  status?: number
}
interface IFilterFormProps {
  initStatus?: number
  onSubmit?: (e: FilterFormType) => void
  onReset?: VoidFunction
}

export default function FilterForm(props: IFilterFormProps) {
  const { initStatus, onSubmit, onReset } = props
  const formRef = useRef<ProFormInstance>()

  useEffect(() => {
    formRef.current?.setFieldValue('status', initStatus)
  }, [])

  return (
    <QueryFilter<FilterFormType>
      formRef={formRef}
      onFinish={async values => {
        onSubmit?.(values)
      }}
      onReset={() => {
        onReset?.()
        formRef.current?.resetFields() // 解决重置后,页面上初始化值未清空问题
      }}
      labelWidth='auto'
      omitNil={false} // 默认为true,会自动清空 null 和 undefined 的数据。解决手动清除下拉框后,查询参数里下拉选项仍存在问题
    >
      <ProFormText name='name' label='名称' placeholder='名称' />
      <ProFormSelect
        name='status'
        label='状态'
        options={[
          { label: '离线', value: 0 },
          { label: '在线', value: 1 },
        ]}
      />
    </QueryFilter>
  )
}

 

标签:status,...,初始值,ProForm,formRef,onReset,onSubmit,ProComponents,initStatus
From: https://www.cnblogs.com/linjiangxian/p/18397929

相关文章

  • 在前面定义的 Person 类中添加两个构造器: 第一个无参构造器:利用构造器设置所有人的 ag
    1publicclassConstructorExercise{2//编写一个main方法3publicstaticvoidmain(String[]args){4Personp1=newPerson();//无参构造器5//下面输出name=null,age=186System.out.println("p1的信息name="+p......
  • 使用ProForm的useRef()对象的注意事项
    1、我创建了useRef对象,并在ProForm中使用 2、但是我在loadData方法中使用formRef对象时报错。显示formRef.current得到的对象为空 3、但是loadData是在渲染完成后加载的,为什么formRef.current会为空。 问题原因:原来是我在loadData之前,将loading值设为false,这时会重......
  • 为什么C++中不能将数组的内容拷贝给其他数组作为初始值,也不能用数组给其他数组赋值
    0前言来自primer的3.5部分以下写法是有问题的inta[]={0,1,2}inta2[]=a;//错误,不允许使用一个数组初始化另一个数组a2=a;//错误:不能把一个数组赋值给另一个数组有些编译器支持上面的操作,但是书上说这属于非标准功能,是编译器扩展1原因C++中的数组......
  • 使用JS来开发ProComponents的ProTable案例
    ProComponents的ProTable组件是基于React和TypeScript开发的,但也可以在JavaScript项目中使用。以下是一个使用JavaScript的ProTable示例:import{useState,useRef}from'react';import{Button}from'antd';importProTablefrom'@ant-design/pro-table&#......
  • 解决异常报错:“CrystalDecisions.CrystalReports.Engine.ReportDocument”的类型初始
    在Winform程序里调用水晶报表打印在这句:ReportDocumentRepostDoc=newReportDocument();一直报错提示:”CrystalDecisions.CrystalReports.Engine.ReportDocument”的类型初始值设定项引发异常 在网上查到几种解决方式都没解决,依然报错:1.确认程序引用地址是否缺少必要的dl......
  • antd Pro组件ProFormList实现自定义action
    antdPro组件ProFormList实现自定义actionProFormList是antdesignpro的结构化数据组件,通常用来实现动态表单。现在有个需求,除了组件自带的删除和复制,还需要增加两个按钮来实现每个item位置的上下移动,如图所示:查看官方文档,组件有提供自定义action的API--actionRender,介绍如下......
  • 【从0学习Solidity】 8. 变量初始值
    【从0学习Solidity】8.变量初始值博主简介:不写代码没饭吃,一名全栈领域的创作者,专注于研究互联网产品的解决方案和技术。熟悉云原生、微服务架构,分享一些项目实战经验以及前沿技术的见解。关注我们的主页,探索全栈开发,期待与您一起在移动开发的世界中,不断进步和创造!本文收录于不写......
  • 以下是 CentOS 7 中 `/etc/yum.repos.d/CentOS-Base.repo` 文件的初始值:
    以下是CentOS7中/etc/yum.repos.d/CentOS-Base.repo文件的初始值:#CentOS-Base.repo##该文件包含了CentOS-Base源的基本信息,用于yum工具的软件包安装。##安装此文件可启用CentOS-Base源,并且默认情况下启用了所有仓库。##[base]仓库是极为基本的组件,包含了......
  • 假设 a 是一个由线程 1 和线程 2 共享的初始值为 0 的全局变量,则线程 1 和线程 2 同时
    假设a是一个由线程1和线程2共享的初始值为0的全局变量,则线程1和线程2同时执行下面的代码,最终a的结果不可能是()booleanisOdd=false;for(inti=1;i<=2;++i){if(i%2==1)isOdd=true;elseisOdd=false;a+=i*(isOdd?1:-1);}A:-1B:-2C:0D:1......
  • spring boot 限制初始值大小及参数中文详解
    要加“m”说明是MB,否则就是KB了.-Xms:初始值-Xmx:最大值 -Xmn:最小值java-Xms10m-Xmx80m-jarmod.jar & 时区设置 java-jar-Duser.timezone=GMT+08mod.jar& #----------------------------------------  #核心属性  #----------------------------------------   #BANN......