前端笔记: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 ...
随机推荐
- Zabbix 监控项更多用法
监控服务端口状态 配置 Zabbix 提供的检测器 配置自定义值映射 查看监控项数据状态 触发器配置 自定义监控项 TCP 11 种状态 TCP 11 种状态 LISTEN - 侦听来自远方TCP端口 ...
- codeforces 8C(非原创)
C. Looking for Order time limit per test 4 seconds memory limit per test 512 megabytes input standar ...
- CSS clip-path in action
CSS clip-path in action <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 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 ...
- 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 ...
- 转换时间戳,兼容webkit和IE
var date="2018-6-6"; var test=Date.parse(date.replace(/-/g,"/"));console.log(tes ...
- 倒计时2天!2021 NGK新加坡区块链峰会与你不见不散!
1月31日14时,NGK将于新加坡召开"2021 NGK新加坡区块链峰会",并将在全球开启同步直播. 据了解,本次峰会将汇聚全球二十多位顶尖区块链专家学者,与NGK灵石技术团队 ...
- 如何在Pycharm中自动添加时间日期、作者等信息
参考下面的内容 #_author_='Lucky';#date: ${DATE}
- git相关问题
1.git查看远程分支更新到本地 git clone 项目地址,示例如下: git clone https://github.com/zhongyushi-git/vue-test.git 在拉取时, ...
- 鸿蒙开源第三方组件 ——B站开源弹幕库引擎的迁移(上)
鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录: 一.弹幕库的基础知识 二.弹幕库的使用方法 三.sample解析 四.作者系列文章合集 前言 ...