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

希望对你有所帮助！

react antd form 表单清空相关推荐

React之Form表单封装
文章目录一.form表单封装之树形选择框封装 1. 代码结构 (1)html代码 (2)树形选择框的结构 (3)css (4)转化函数 2. 使用方法 (1)单独使用 (2)和form表单一起使用 ...
Antd form 表单提交数据获取
1.Form表单 <Form name="nest-messages" onFinish={this.onSubmit}layout={'vertical'}>< ...
React的form表单提交
包括了表单里input radio select checkbox textarea form 等一些操作, import React,{Component} from 'react';class R ...
react antd 动态表单
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Form, InputNumb ...
antd Form 表单验证
微信公共号开发,用户修改密码,对用户输入的密码进行校验 1. 必须填写 2. 字符串中必须包含大写字母,小写字母和数字 3. 长度不得小于6 代码实现: <Form.Item name='new ...
Antd Form表单Input非汉字输入(支持输入数字、字母、特殊符号)
//不能输入非汉字效验效验不能输入非空字符串validateNoChinese = (rule, value, callback) => {let reg = /^[^\u4e00-\u9fa ...
layui 如何清空form表单
当你在写新增与修改的时候,大家都会共用一个界面,但是当你点击完修改,再去点击新增,会有残留在新增界面上炒鸡有用的form表单清空: document.getElementById("for ...
reac笔记_13 form表单元素中 input/defaultValue + useState/useRef
目录原生html元素 input属性示例1 示例2 react中受控组件与非受控组件属性 error - input标签value属性使用示例 - useState 示例 - input标签 ...
antd form 表单数据校验·记
目录一.antd form 表单校验语法二.antd form 表单校验规则三.antd form 表单校验实例 1.一般的表单校验 2.连续的表单校验 3.连续的复杂表单校验 (1).Form ...

react antd form 表单清空

react antd form 表单清空相关推荐

最新文章

热门文章