关于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的更新,肯定各处表示也是有所不同。此处如有不同,或者不到之处,也欢迎指正
希望对你有所帮助!
原文地址:https://blog.csdn.net/datouniao1/article/details/120379635
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。