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的更新,肯定各处表示也是有所不同。此处如有不同,或者不到之处,也欢迎指正

希望对你有所帮助!

 

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
React Antd Form是一个基于React框架的组件库,用于快速构建表单。在使用React Antd Form时,常常会遇到需要在表单中进行赋值的情况。 React Antd Form提供了多种赋值方式,下面分别介绍常用的两种方式: 1. setFieldsValue setFieldsValue方法用于直接设置表单数据。可以使用该方法将已有的数据赋值给表单中的相应字段。该方法接收一个对象作为参数,对象的属性名对应表单中的字段名,属性值对应表单中的数据。 使用示例: const data = { name: 'Jack', age: 28 }; form.setFieldsValue(data); 在上面的示例代码中,我们将一个包含name和age属性的对象data直接赋值给表单form。 2. initialValues initialValues属性用于在表单初始化时设置初始值。该属性接收一个对象作为参数,对象的属性名对应表单中的字段名,属性值对应表单中的数据。 如果需要动态地修改表单中的初始值,可以将initialValues属性作为Form组件的props传入,在表单初始化后再通过setFieldsValue方法进行修改。 使用示例: const data = { name: 'Jack', age: 28 }; <Form initialValues={data}> <Form.Item label="Name" name="name"><Input /></Form.Item> <Form.Item label="Age" name="age"><InputNumber /></Form.Item> </Form> 在上面的示例代码中,我们将包含name和age属性的对象data作为initialValues传入表单组件中。 总的来说,虽然React Antd Form提供了多种赋值方式,但常见的数据赋值需求基本可以通过使用setFieldsValue方法和initialValues属性来完成。用户可以根据实际需求选择合适的方式来进行赋值。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值