前端笔记:React的form表单全部置空或者某个操作框置空的做法
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表单全部置空或者某个操作框置空的做法的更多相关文章
- 前端HTML基础之form表单
目录 一:form表单 1.form表单功能 2.表单元素 二:form表单搭建(注册页面) 1.编写input会出现黄色阴影问题 三:完整版,前端代码(注册页面) 四:type属性介绍 1.inpu ...
- HTML学习笔记 域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例 第四节 (原创)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Unit 2.前端之html--table(表格),form(表单)标签
一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...
- 用layui前端框架弹出form表单以及提交
第一步:引用两个文件 第二步:点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr(&q ...
- Django学习笔记之Django Form表单详解
知识预览 构建一个表单 在Django 中构建一个表单 Django Form 类详解 使用表单模板 回到顶部 构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的 ...
- form表单与CSS选择器和样式操作
form表单 """获取前端用户数据并发送给后端服务器""" <form action=""></fo ...
- form表单里如果只存在一个文本框,enter键提交
在这里说一说浏览器里form表单的默认行为 我们都知道浏览器是存在很多默认行为的,可能是出于常用行为考虑又或者是历史原因.但有时候我们不需要这些默认行为.以下: 1).当form表单里只存在一个inp ...
- Django学习笔记之Django Form表单
Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...
- web前端框架之自定义form表单验证
自定义form验证初试 .在后端创建一个类MainForm,并且在类中自定义host ip port phone等,然后写入方法,在post方法中创建MainForm对象,并且把post方法中的sel ...
随机推荐
- boomworks 1999~2009
大众软件 PC定时执行专家 4.0 (PCTaskTimer) - 功能强大.简单易用的定时执行软件.具有功能多.体积小.消耗资源少的特点. 超级网际搜索(SuperSearch) - 免费.快速.高 ...
- 创建AVL树,插入,删除,输出Kth Min
https://github.com/TouwaErioH/subjects/tree/master/C%2B%2B/PA2 没有考虑重复键,可以在结构体内加一个int times. 没有考虑删除不存 ...
- 鸟哥的linux私房菜——第十六章学习(程序管理与 SELinux 初探)
第十六章.程序管理与 SE Linux 初探 在 Linux 系统当中:"触发任何一个事件时,系统都会将他定义成为一个程序,并且给予这个程序一个 ID ,称为 PID,同时依据启发这个程序的 ...
- 一些简单的SQL语句
简单的SQL入门 一,简介 1, 一个数据库包含一个或多个表,表包含带有数据的记录(行) 2, SQL对大小写不敏感,语句的分号看具体情况 二,语法 1, 数据操作语言:DML a) ...
- 操作系统 part1
实验好多,人好累... 一.进程和线程 references: 进程三种基本状态 进程和线程的概念.区别和联系 进程和线程的主要区别(总结) 进程间通信IPC 1.进程 进程,是资源分配和调度的基本单 ...
- exgcd&&中国剩余定理专题练习
hdu1573求中国剩余定理解的个数 #include <iostream> #include <cstdio> using namespace std; int a[100] ...
- node.js cli downloader
node.js cli downloader cli 下载器 refs https://github.com/xgqfrms/react-storybook-app xgqfrms 2012-2020 ...
- 如何在 Apple Watch S6上离线播放音乐
如何在 Apple Watch S6上离线播放音乐 Apple Watch 离线播放音乐 营销策略,捆绑销售 Apple Watch + AirPods + Apple Music Apple Wat ...
- Angular 2 for 2017 web full stack development
1 1 1 Angular 2 for 2017 web full stack development 1 1 https://angular2.xgqfrms.xyz/ https://ng2-he ...
- scrimba & interactive free online tutorials
scrimba & interactive free online tutorials https://github.com/scrimba/community/blob/master/FAQ ...