React antd Design4x 版本 form表单如何进行清空

最新推荐文章于 2023-12-03 21:52:04 发布
最新推荐文章于 2023-12-03 21:52:04 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： 前端开发 React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YFCookie/article/details/112685626
版权

React antd Design4x 版本 form表单如何进行清空

我在从3版本升级到4版本的时候发现内容改了很多，在点击提交按钮清空表单的时候我发现没有不能像如下这麽用了，网上找了很多方法都不能用，都是form={form}，要不就是hooks版本的就很烦，没有找到我想要的class版本中的，最终在自己的不断尝试下，给搞出来了。在这里插入图片描述

用法如下

antd 4 上面提供的是hooks版本，我用的是class版本写的
请在你的form 表单里这样写：用ref进行绑定，
在这里插入图片看到描述
在这里插入图片描述
4 版本中class表单的值都是name绑定的，
所以当你清空表单的时候需要在你点击提交的时候执行一个方法：
在这里插入图片描述
里面的username就是你<form.Item>里面的name绑定的值，其实我当时就是这搞错了，搞成整个表单的value直接赋值为空了，把你的想要赋值为空的写进去就行了。欢迎留言评论，有不会的可以一起商量

github拾荒专家
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React+AntDesign实现Form表单的动态增加删除操作
Alanrnzearn的博客
04-20 3624
效果示例 1. 原来效果 2. 点击+之后 实现说明 此次开发需要用到动态生成多行表单，因为新老数据要兼顾，老数据是对象存储走的一个接口，新数据走的多行配置，对象数组存储，走的另一个接口，所以在展示上就需要区分下。 注意这里默认了第一行不能删除，当然你也可以在变成多行的时候，给每一行都加上删除，但是为了避免数据被删成一行都不剩了，你需要处理下，要么在删成一行的时候禁止删除或者隐掉删除按钮，要么就在删除后要调接口的时候判断处理下，具体的得看需求来开发。 因为这块的按钮有设置，如果配置的参数含有passwo
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。...
前端项目实战175-ant design form清空表单
qq_41632427的博客
11-25 386
前端
antd 4.x.x Form组件 表单提交 值清空问题
Web小生
03-12 2618
Form组件 表单提交时表单内容的控制 目的：表单内容的清空与否，自主控制 未控制情况下 const onFinish = (value) => { console.log(value) } <Form onFinish={onFinish} > <Form.Item name='editValue' > <Input.TextArea rows={4} /> </Form.Item> <Form.I
ant-design-vue表单from清空，设置值
qq_45432996的博客
09-15 7809
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
React实例1-实现删除操作
Dreamer.
10-08 2518
1.组件下标传递 传递下标就要有事件产生，先来绑定一个双击事件。我们在li标签上绑定一个onClick事件，执行删除操作。 <ul> { this.state.list.map((item, index) => { return <li onClick={this.deleteItem.bind(this, index)} key={index + item}>{item}{index}</li> })
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
react ant Design手动设置表单的值操作
01-22
1.设置表单的值 this.props.form.setFieldsValue({ name:”张三”, }); 2.清空表单的值 ...补充知识：react使用antd表单赋值，用于修改弹框 1、使用getFieldDecorator的initialValue 2、在state里定义一个
react-antd-super-form:演示
05-31
react-antd-super-formInstallnpm install --save react-antd-super-form1.x 的版本 适用于 antd 3.x2.x 的版本 适用于 antd 4.xUsageimport React, { Component } from 'react';import SuperForm, { Table, List, ...
在react-antd中弹出层form内容传递给父组件的操作
01-21
import { Form, Input} from 'antd'; const FormItem = Form.Item; class Forms extends Component{ getItemsValue = ()=>{ //3、自定义方法，用来传递数据（需要在父组件中调用获取数据） const values= this....
react超级简单的删除功能
FRC16669的博客
12-15 580
第一步：第二步：第三步：第四步：
React删除antd的日期选择器的值
weixin_40817168的博客
07-09 933
state = { keyValue:'123' } <DatePickershowTime key={this.state.keyValue} onChange={()=>{}} onOk={this.singleChangeEnd} /> 清空的方法里面 singleChangeEnd（）{ this.setState({ke...
react antd 设置Form表单值 / 清空Form表单 Form.useForm 报错
cc_King的博客
11-19 5421
文章目录错误原因解决办法 （一共三个步骤） 今天使用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 手动清空表单中的内容
sheep_yyx的博客
11-22 832
react 手动清空表单中的内容
ant design 时间控件清空值
山外小楼
09-22 3146
有时候在使用时间组件，想要通过按钮来清空已经选择的值，可以再组件中添加一个key 来重置 <RangePicker width={230} format="YYYY-MM-DD" key={timeRest} onChange={(e, d) => {
react中的列表渲染 + 删除当前项 （附完整代码）
研究生在读，分享学习日常。（零基础学习后端编程）
01-27 1005
效果展示： 代码展示： import React,{Component} from 'react'; /** * 增加菜单组件 */ class AddMenu extends Component{ constructor(props){ super(props) this.state = { inputVal:'', ...
从零开始学习React——(八)：React列表循环删除某项以及参数传递
qq_19249021的博客
01-11 878
本节将介绍列表循环时删除其中某项 需求是这样的：点击已经有的选项时，可以进行删除。 1. 数组下标的传递 需要删除其中某项，那么首先就要知道当前点击项的index，也就是下标，然后绑定一个事件。代码如下： // 省略部分代码 <ul> { this.state.list.map((item, index) => { // 此处如果return后面只有一行的话就不需要写括号，如果需要换行就必须写括号 return ( <li ke.
react之antd Design Input输入框value值清除及弹窗时自动获取焦点
热门推荐
qq_38734862的博客
04-19 1万+
正常我们使用输入框、选择器等都是结合表单来使用的，但是这次我就需要一个输入框来切换到编辑状态，那这样用表单当然肯定也是可以的，但是我觉得不完美，就单独的使用input组件，但是遇到了两个问题：输入框内容清除、自动获取焦点。然后我就把输入框单独拎出来来进行重现这两个问题，并想办法解决。单独测试的代码=》codesandbox在线测试传送门 输入框内容清除 输入框显示默认值的话首先想到的就是 ...
关于清空ant.design 中表单内容的方法
最新发布
Go_ahead_forever的博客
12-03 683
关于清空ant.design 中表单内容的方法。其实就两个方法具体怎么清除一个一个试试就知道了。
react，antd-design Form Tooltip复制功能
05-30
如果你想在antd-design的Form组件中添加Tooltip并且支持复制功能，可以通过以下方式实现1. 在Form.Item的wrapperCol属性中添加Tooltip组件，并设置title属性为需要显示的提示文本。 ``` <Form.Item label="Label" name="fieldName" wrapperCol={{ span: 12 }} > <Tooltip title="Tooltip text"> <Input /> </Tooltip> </Form.Item> ``` 2. 为Tooltip组件添加一个ref属性，并把它指向一个回调函数。 ``` <Tooltip title="Tooltip text" ref={node => this.tooltipRef = node}> <Input /> </Tooltip> ``` 3. 在需要复制的组件上添加一个onClick事件，它会调用Tooltip组件的getPopupDomNode()方法获取Tooltip的DOM节点，并将其内容复制到剪贴板中。 ``` <Input onClick={() => { const tooltipNode = this.tooltipRef.getPopupDomNode(); const textNode = tooltipNode.querySelector('.ant-tooltip-inner'); const text = textNode.innerText; navigator.clipboard.writeText(text); }} /> ``` 这样，当用户点击Input组件时，Tooltip中的文本就会被复制到剪贴板中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值