1.全部置空的做法,一般在弹出框关闭后,需要重置该form所有表单:

this.props.form.resetFields();

2.针对某个操作框置空的做法

例如,form表单里有一个部门和一个张三的联动下拉框,每次选择部门时,都需要重置员工对应的下拉框:

该表单部分前端React代码为:

 1 <FormItem   label="部门" {...ItemLayout}>
2 {getFieldDecorator('dept', {
3 ​
4 })(
5 <Select optionFilterProp="dept" placeholder="请选择部门">
6 {
7 dept.map((item) => (
8 <Option key={item.d}>{item.deptname}</Option>
9 ))
10 }
11 </Select>
12 )}
13 </FormItem>,
14 ​
15 <FormItem label="员工" {...ItemLayout}>
16 {getFieldDecorator('people', {
17 ​
18 })(
19 <Select optionFilterProp="people" placeholder="请选择员工">
20 {
21 people.map((item) => (
22 <Option key={item.id}>{item.peopleName}</Option>
23 ))
24 }
25
26 </Select>
27 )}
28 </FormItem>

若要只想置空或重置员工下拉框默认值话,可这样设置:

this.props.form.setFieldsValue({
people: null,
});

form还有不少便捷的方法,如getFieldValue(fieldName: string)则可以获取到各FormItem的选项值,如以下则可获取到员工选框的值:

this.props.form.getFieldValue(“people”)

前端笔记:React的form表单全部置空或者某个操作框置空的做法的更多相关文章

  1. 前端HTML基础之form表单

    目录 一:form表单 1.form表单功能 2.表单元素 二:form表单搭建(注册页面) 1.编写input会出现黄色阴影问题 三:完整版,前端代码(注册页面) 四:type属性介绍 1.inpu ...

  2. HTML学习笔记 域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例 第四节 (原创)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Unit 2.前端之html--table(表格),form(表单)标签

    一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...

  4. 用layui前端框架弹出form表单以及提交

    第一步:引用两个文件 第二步:点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr(&q ...

  5. Django学习笔记之Django Form表单详解

    知识预览 构建一个表单 在Django 中构建一个表单 Django Form 类详解 使用表单模板 回到顶部 构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的 ...

  6. form表单与CSS选择器和样式操作

    form表单 """获取前端用户数据并发送给后端服务器""" <form action=""></fo ...

  7. form表单里如果只存在一个文本框,enter键提交

    在这里说一说浏览器里form表单的默认行为 我们都知道浏览器是存在很多默认行为的,可能是出于常用行为考虑又或者是历史原因.但有时候我们不需要这些默认行为.以下: 1).当form表单里只存在一个inp ...

  8. Django学习笔记之Django Form表单

    Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...

  9. web前端框架之自定义form表单验证

    自定义form验证初试 .在后端创建一个类MainForm,并且在类中自定义host ip port phone等,然后写入方法,在post方法中创建MainForm对象,并且把post方法中的sel ...

随机推荐

  1. Zabbix 监控项更多用法

    监控服务端口状态 配置 Zabbix 提供的检测器 配置自定义值映射 查看监控项数据状态 触发器配置 自定义监控项 TCP 11 种状态 TCP 11 种状态 LISTEN - 侦听来自远方TCP端口 ...

  2. codeforces 8C(非原创)

    C. Looking for Order time limit per test 4 seconds memory limit per test 512 megabytes input standar ...

  3. CSS clip-path in action

    CSS clip-path in action <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. post upload file & application/x-www-form-urlencoded & multipart/form-data

    post upload file application/x-www-form-urlencoded & multipart/form-data https://stackoverflow.c ...

  5. nasm astrncat_s函数 x86

    xxx.asm: %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 %define p4 ebp+20 section .text global ...

  6. 转换时间戳,兼容webkit和IE

    var date="2018-6-6"; var test=Date.parse(date.replace(/-/g,"/"));console.log(tes ...

  7. 倒计时2天!2021 NGK新加坡区块链峰会与你不见不散!

    1月31日14时,NGK将于新加坡召开"2021 NGK新加坡区块链峰会",并将在全球开启同步直播.   据了解,本次峰会将汇聚全球二十多位顶尖区块链专家学者,与NGK灵石技术团队 ...

  8. 如何在Pycharm中自动添加时间日期、作者等信息

    参考下面的内容 #_author_='Lucky';#date: ${DATE}

  9. git相关问题

    1.git查看远程分支更新到本地 git clone 项目地址,示例如下: git clone https://github.com/zhongyushi-git/vue-test.git 在拉取时, ...

  10. 鸿蒙开源第三方组件 ——B站开源弹幕库引擎的迁移(上)

    鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录: 一.弹幕库的基础知识 二.弹幕库的使用方法 三.sample解析 四.作者系列文章合集 前言 ...