在React框架前端开发中,经常会有弹出框的开发,涉及到弹出框,难免就会有表单。一般在关闭弹出框或者对表单联动时,往往都需要考虑对表单进行置空操作了。
我以前在工作就遇到过这类问题,正好顺便对表单置空这块做一些总结小记录。
主要有两种情况,一种是对整个表单置空,一种是想灵活对其中个别选框置空。
1.全部置空的做法,一般在弹出框关闭同时,重置该form所有表单,使用方法如下:
this.props.form.resetFields();
在代码里的使用案例如下:
1 //重置表单
resetForm = () => { 2 this.props.form.resetFields(); 3 }; 4 5 6 return ( 7 <Modal 8 title=添加 9 maskClosable={false}10 confirmLoading={loading}11 visible={visible}12 onOk={.submit}13 onCancel={.cancel}14 afterClose={.resetForm}15 >16 <Form onSubmit={this.submitHandle}>17 ......18 </Form>19 </Modal>20 );
2.针对某个操作框置空的做法
例如,form表单里有一个部门和一个张三的联动下拉框,每次选择部门时,都需要重置员工对应的下拉框:
该表单部分前端React代码为:
1 <FormItem label=部门 {...ItemLayout}> 2 {getFieldDecorator('dept',{ 4 })( 5 <Select optionFilterProp=dept placeholder=请选择部门> { 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'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>
若要只想置空或重置员工下拉框默认值话,可这样设置:
.props.form.setFieldsValue({ people: null<span style=color: rgba(0,});
form还有不少便捷的方法,如getFieldValue(fieldName: string)则可以获取到各FormItem的选项值,如以下则可获取到员工选框的值:
this.props.form.getFieldValue(“people”)
原文地址:https://www.cnblogs.com/zhujiqian
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。