React form 提交后 数值处理问题

最新推荐文章于 2023-03-30 12:06:50 发布
最新推荐文章于 2023-03-30 12:06:50 发布
阅读量148 收藏
点赞数
分类专栏： 个人总结 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42606338/article/details/128647403
版权

问题场景描述：
1.antd的modal组件，里面包裹form表单
2.第一次选择或输入后，提交完成，modal关闭
3.再次打开时，会先清空state中的form对象设置为默认值，但此时modal里的form表单依然显示上次输入的内容

解决分析：
1.各种form reset但无果
2.添加上modal的destoryOnClose属性后，问题解决

以做记录

东方孤独
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Form组件的实现封装杂谈
08-27
表单提交是 Form 组件的最后一个部分，它可以通过使用 React 的事件处理函数来实现，例如： ```jsx handleSubmit = (event) => { event.preventDefault(); // 提交表单的逻辑 }; ``` Form 组件的实现封装可以通过...
ant.design（简称antd）中Form表单组件提交表单、表单数据效验、表单自定义效验、表单布局集合
ajiuyuan的博客
09-01 6950
1、以下是一个组件，首先引入ant相关依赖，在引入react相关依赖,主要使用了Form的2个内置函数和Form.useWatch进行监听指定字段,然后使用 form.setFieldsValue进行字段值更新。4、onFinishFailed函数是在按钮设置了htmlType="submit"属性，在点击效验规则有部分未通过效验时触发的函数。3、onFinish函数是在按钮设置了htmlType="submit"属性，在点击效验规则全部通过时触发的函数。下图是UI目标样式图。...
react获取表单form对象的两种方式，获取form后进行重置
吃瓜群众的博客
06-24 4274
1.函数组件 const [form] = Form.useForm(); useEffect(() => { form.setFieldsValue({...initialValues}); }, []) return <Form form={form} onFinish={ this.onFinish } onFinishFailed={ this.onFinishFailed } .
react项目 form表单重置 initialValue
qinyuhua93的博客
11-23 7621
项目中做了一个弹框，将新增和修改放到了同一个弹框，然后判断一个对象是否有值来判断是新增还是修改。 render() { const extra = ( &lt;Group&gt; &lt;Button onClick={this.handleAdd}&gt;新增&lt;/Button&gt; &lt;/Group&gt; ); ...
react antd form 表单清空
热门推荐
datouniao1的博客
09-19 1万+
关于react_antd_desgin的学习这两天也是获取到的知识零零散散，大多在网上也能获取的到，所以隔了很长的时间，没有编写关于react相关的文章。今天之所以写也是因为公司中秋节放假，在郑州，窗外的秋雨淅淅沥沥，再加上一点带有凉意的秋风，打消了外出的念头。在家也是无所事事,,,好了，言归正传 先说需求吧： 在弹出的modal 中，有一个Form 表单，现在我要实现重置的功能，点击重置的时候，表单输入框中的内容清空。 首先我们开看这一段modal的代码： <Modal ti.
关于antd弹出框内的From表单数据不清空的问题
weixin_59749798的博客
08-09 868
一键清空antd弹出框里from表单的值
mobx-react-form：React性MobX表单状态管理
02-05
••• • MobX React表格 React式MobX表单状态管理 ...npm install --save mobx-react-form 选择并设置验证插件 有关支持的软件包的更多信息，请参见 。 下面，我们使用validatorjs包创建一个plugins对象
React Form 指南.pdf
08-22
React Form 指南.pdf
simple-react-form：在React中处理表单的最简单方法
02-05
简单React Form是处理React中表单的最简单方法。 它可以帮助您在React和制作可重用的表单组件。 这只是一个框架，您必须或使用要使用的。 要与react native一起使用 安装 安装基本套件 npm install --save simple...
react 使用antd（4.x） Modal关闭弹框清空数据问题
fankeweiii的博客
03-30 3257
react 使用antd Modal关闭弹框清空数据问题
react项目遇到的问题及解决方案【持续更新中...】
zhangluludeCSDN的博客
01-05 3112
1、modalForm表单每次点开显示的重复 这个问题可能是你没有给模态框加一个随机的key 如果加上key之后每次点击出来的模态框就是一个新的和上次无关 2、树形选择数据结构 const cascaderOptions = [ { label: '综合管理中心', value: 'fe', children: [ { label: '运营部', value: 'js', }, { label:
React使用 Ant Design 的From 组件时容易踩的坑
lml21lml的博客
07-23 738
1、使用Ant Design的From表单容易遇到的问题： 1.2使用MoDal + From表单如何回显？ 定义 formRef = React.createRef(); 在From表单引用 ref={this.formRef} ,定义initialValues 初始化值 1.3 Modal组件关闭如何清空Form表单的值？ 和 Form 一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据，需要在Form表单处设置 preserve={false} 1
react antd 设置Form表单值 / 清空Form表单 Form.useForm 报错
cc_King的博客
11-19 5406
文章目录错误原因解决办法 （一共三个步骤） 今天使用antd的Form组件时，遇到一个需求，“提交完表单之后需要重置Input框”； 照着手册的方法就一直没有成功。。。比如 const [form] = Form.useForm();这句就没有成功过。。。 错误原因 React Hook "Form.useForm" cannot be called at the top level. React Hooks must be called in a React function component or
react hooks中当数据为最新的数据，并且页面已渲染，打印仍为原来的数据
yangyanqin2545的博客
06-18 963
react hooks中当数据已为最新的数据，页面也已渲染，但打印一直是原来数据的解决办法。
Elementui-React表单重置遇坑
qq_40942380的博客
12-14 298
之前学vue的时候使用element-ui做了一个后台项目，最近刚学完react，打算用函数式组件+hooks把之前的项目重做一遍，在表单重置的时候，使用**resetFields()**发现只是把校验的错误清掉了，输入框的文本还在。重置前：重置后：校验错误清掉了，但是文本没有清空。
react 模态框 嵌套from 表单 关闭模态框清空表单值
山外小楼
08-22 822
react 模态框 嵌套from 表单 关闭模态框清空表单值
React的form表单提交
qq_42957741的博客
12-04 7829
包括了表单里input radio select checkbox textarea form 等一些操作， import React,{Component} from 'react'; class Reactform extends Component { constructor(props) { super(props); this.s...
对于Form表单reset方法的误解
ForeverCjl的专栏
03-05 9970
HTML中Form表单的reset方法被用来清空用户所输入的内容，以前一直误以为其是单纯的将input等输入项中的值清空。 但实际上不是这样的，reset方法的本质是将input等输入项中的内容还原为属性value中的值，而不是“”空值。 w3c上是这样说的： 在 HTML 表单中 标签每出现一次，一个 Reset 对象就会被创建。 当重置按钮被点击，包含它的表单中所有输入元
react中使用antd的表单重置数据
zoepriselife316的博客
08-19 9900
resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会重置为initialValue 使用： //这个事件，可以是click可以是生命周期函数，具体看需求 componentWillUnmount() { this.props.for...
react form表单
最新发布
04-29
React是一个流行的JavaScript库，它可以用于构建复杂的用户界面。React表单是React组件的一部分，可以用于收集和验证用户输入的数据。...4. 可以使用第三方库如Formik和React Hook Form等来简化表单的处理和验证过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值