react antd form 表单清空

关于react_antd_desgin的学习这两天也是获取到的知识零零散散，大多在网上也能获取的到，所以隔了很长的时间，没有编写关于react相关的文章。今天之所以写也是因为公司中秋节放假，在郑州，窗外的秋雨淅淅沥沥，再加上一点带有凉意的秋风，打消了外出的念头。在家也是无所事事,,,好了，言归正传

先说需求吧：

 在弹出的modal 中，有一个Form 表单，现在我要实现重置的功能，点击重置的时候，表单输入框中的内容清空。

首先我们开看这一段modal的代码：

			 <Modal title="新增系统参数"  
		            visible={this.state.isVisiable} 
					footer={null}>
					<Form layout="horizontal"
					      onFinish={this.submitForm}
						  ref={this.formRef}
						  name="control-ref"
					>
						  <Form.Item name="configname" label="参数名称">
						         <Input placeholder="请输入参数名称" />
						  </Form.Item>
						  <Form.Item  name="configvalue" label="参数项值">
						         <Input placeholder="请输入参数值" />
						  </Form.Item>
						  <Form.Item  name="remark" label="参数备注">
						         <Input placeholder="请输入备注" />
						  </Form.Item>
						   <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
						     <Space>
						        <Button type="primary" htmlType="submit">
						            添加
						        </Button>
								<Button htmlType="button" onClick={this.onReset}>
								    重置
								 </Button>
							  </Space>
						   </Form.Item>
				    </Form>
			 </Modal>

这样的一段代码也是很平常的，那么我来说说很清空有管理的设置

1. Form 中属性  ref={this.formRef} 是必须的

2. Form.Item  中的name 属性是必须的

既然是ref={this.formRef} 想必 formRef 在类中肯定有所定义的地方

 我把creactRef的声明放到的构造函数的上方

接下来便是  this.onReset 这个函数的定义了

	onReset=()=>{
		this.formRef.current.resetFields();
	}

之前也是看过很多的博客，之后onReset 这个函数的定义，可能随着时间antd的更新，肯定各处表示也是有所不同。此处如有不同，或者不到之处，也欢迎指正

希望对你有所帮助！

标签：form,Form,formRef,onReset,表单,react,antd
来源： https://blog.csdn.net/datouniao1/article/details/120379635