做货代的有哪些网站,推荐一些做电子的网站,合肥做网站推广哪家好,中国交通建设监理协会网站打不开原创/朱季谦 在React框架前端开发中#xff0c;经常会有弹出框的开发#xff0c;涉及到弹出框#xff0c;难免就会有表单。一般在关闭弹出框或者对表单联动时#xff0c;往往都需要考虑对表单进行置空操作了。
我以前在工作就遇到过这类问题#xff0c;正好顺便对表单置空…原创/朱季谦 在React框架前端开发中经常会有弹出框的开发涉及到弹出框难免就会有表单。一般在关闭弹出框或者对表单联动时往往都需要考虑对表单进行置空操作了。
我以前在工作就遇到过这类问题正好顺便对表单置空这块做一些总结小记录。
主要有两种情况一种是对整个表单置空一种是想灵活对其中个别选框置空。
1.全部置空的做法,一般在弹出框关闭同时重置该form所有表单使用方法如下
this.props.form.resetFields();
在代码里的使用案例如下 1 //重置表单 resetForm () {2 this.props.form.resetFields();3 };4 5 6 return (7 Modal8 title添加9 maskClosable{false}
10 confirmLoading{loading}
11 visible{visible}
12 onOk{this.submit}
13 onCancel{this.cancel}
14 afterClose{this.resetForm}
15
16 Form onSubmit{this.submitHandle}
17 ......
18 /Form
19 /Modal
20 );2.针对某个操作框置空的做法
例如form表单里有一个部门和一个张三的联动下拉框每次选择部门时都需要重置员工对应的下拉框 该表单部分前端React代码为 1 FormItem label部门 {...ItemLayout}2 {getFieldDecorator(dept, {3 4 })(5 Select optionFilterPropdept placeholder请选择部门6 {7 dept.map((item) (8 Option key{item.d}{item.deptname}/Option9 ))
10 }
11 /Select
12 )}
13 /FormItem,
14
15 FormItem label员工 {...ItemLayout}
16 {getFieldDecorator(people, {
17
18 })(
19 Select optionFilterProppeople 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”)
