react使用antd表单赋值,用于修改弹框的操作
1、使用getFieldDecorator的initialValue
2、在state里定义一个变量存表格的数据
3、给打开弹框的方法传个record
4、把表格里的值存到state
5、把在state里存的值传给弹框
6、获取传过来的值
7、在取消方法和修改成功后中给赋空值,要不然,点击添加的方法表单里面会有值
7、OK
补充知识:react中使用antd的表单重置数据
resetFields 重置一组输入控件的值(为 initialValue)与状态,如不传入参数,则重置所有组件 Function([names: string[]])
注:initialValue有值时会重置为initialValue
使用:
//这个事件,可以是click可以是生命周期函数,具体看需求 componentWillUnmount() { this.props.form.resetFields(); //这是重置为默认值 //在此进行相应操作 console.log('值已经清空') }
以上这篇react使用antd表单赋值,用于修改弹框的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
解决antd的Form组件setFieldsValue的警告问题
记住:setFieldsValue的字段要对应得上 解决antd的Form组件setFieldsValue的警告 使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告,字面意义去看是说在 render之前设置了表单值的问题. 解决 在使用setFieldsValue给表单Form的某一个filed赋值时,可能掺杂了非表单控件
-
antd日期选择器禁止选择当天之前的时间操作
使用disabledDate属性(不可选择的日期) <a-date-picker @change="dateChange" :disabledDate="disabledDate" v-decorator="['endDate']"/> 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current && current <moment().su
-
在antd中setFieldsValue和defaultVal的用法
代码如下: componentWillMount() { this.props.form.setFieldsValue({ phone: this.props.maintain.account.phone, email: this.props.maintain.account.email }); console.log(this.props.form.setFieldsValue); } 打印出来 function setFieldsValue(fieldsValue) { var newFie
-
Antd中单个DatePicker限定时间输入范围操作
1.某个时间段 import React from 'react'; import moment from 'moment'; class DateDemo extends React.Component{ disabledDate = (current) => { return current < moment().startOf('day') || current > moment().add(6, 'day') ; }; datePickerChange = (date) =>
-
antd-日历组件,前后禁止选择,只能选中间一部分的实例
antd-日历组件,前后禁止选择,只能选中间一部分: dateDisabledDate(current) { // 需求有效期的禁止选择时间 if (this.state.sailingtimeValue != null && this.state.sailingtimeValue.length != 0) { return current && (current < moment().subtract(1, 'd').add(1, "M") ||
-
解决antd datepicker 获取时间默认少8个小时的问题
1.扩展日期格式化方法 Date.prototype.format = function (fmt) { let o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //
-
antd Form组件方法getFieldsValue获取自定义组件的值操作
自定义组件 1.自定义组件被getFieldsValue包裹,会获得以下属性 onChange方法, 子组件调用此方法,可将值传给父组件,从而Form可拿到自定义组件的值 value属性,获得初始值 2.组件调用 像Form表单内的组件一样调用,就可以了 补充知识:Ant Design Pro,用setFieldsValue方法,给嵌套到Form表单中的DatePicker或RangePicker组件设置默认值 其实用setFieldsValue或者获取setState方法都可以设置DatePi
-
react使用antd表单赋值,用于修改弹框的操作
1.使用getFieldDecorator的initialValue 2.在state里定义一个变量存表格的数据 3.给打开弹框的方法传个record 4.把表格里的值存到state 5.把在state里存的值传给弹框 6.获取传过来的值 7.在取消方法和修改成功后中给赋空值,要不然,点击添加的方法表单里面会有值 7.OK 补充知识:react中使用antd的表单重置数据 resetFields 重置一组输入控件的值(为 initialValue)与状态,如不传入参数,则重置所有组件 Funct
-
react实现动态表单
本文实例为大家分享了react实现动态表单的具体代码,供大家参考,具体内容如下 1.小要求 在工作中,我们也会碰到这样子的需求:在填写信息的时候,可以填写多个人名.多个需求.以及动态生产一个分组.今天我们就以: 可以动态的添加/删除人名.路径以及可以添加/删除一个分组的需求来开始今天的学习之旅.需求如下图所示: 2.技术点分析 1.数据结构2.react+antd 动态编辑表格数据提及的知识点3.js操作数据的方法: 添加数据.根据下标删除数据 3.代码分析 3.1 数据结构分析 /** *
-
React实现登录表单的示例代码
作为一个Vue用户,是时候扩展一下React了,从引入antd.配置less.router,终于实现了一个简单的登录表单. 代码如下: import React from 'react'; import { Input, Button, message } from "antd"; import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'; impor
-
React事件处理和表单的绑定详解
目录 一.事件处理 1.1 React事件 1.2 事件对象 1.3 事件传参 1.4 函数组件事件处理 二.表单 一.事件处理 1.1 React事件 React 元素的事件处理和 DOM 元素类似.但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法,而不是小写. 例如onclick属性应该写成onClick. 如果采用 JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法).例如已经定义了一个名为handleClick的函数,应该这样调用:
-
layui 对弹窗 form表单赋值的实现方法
目的: 点击编辑按钮 实现 数据回显到弹出 子页面 表单 内.如下图: Html 代码: <body> <div class="layui-form" lay-filter="useradmin" id="useradmin"> <div class="layui-form-item"> <label class="layui-form-label">用 户
-
layui的表单提交以及验证和修改弹框的实例
HTML <div class="layui-form"> <input type="text" class="txt" name="newName" lay-verify="newName" lay-verType="tips" placeholder="请输入姓名"> <input type="text" clas
-
解决antd 表单设置默认值initialValue后验证失效的问题
方法一: getFieldDecorator没有第三个参数,如果写了3个参数就会出错 错误代码: <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='请输入用户名'/> ) } </Form.Item> 正确代码: <Form.Ite
-
ant-design表单处理和常用方法及自定义验证操作
首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误.是一个很好的组件库. 关于表单验证方面是依赖于 async-validator 库.百度的san-xui组件库的表单验证也是依赖与async-validator.说明这个库的实用性还是比较高,可以多了解一下. 首先按照antDesign官网Demo.我们可以copy一个Form表单的demo. LoginForm是表单的组件,下面代码,是React 高阶组件(Hoc). 用于使组件获
-
element-ui和vue表单(对话框)验证提示语(残留)清除操作
问题是这样的: 如果一个页面有多个按钮打开相同的element-ui的Dialog对话框,那么如果第一个点击"顺序"按钮出现红色验证提示语后, 再点击"取消",或者点击页面空白处此对话框消失,而后再点击同一个"顺序"按钮亦或别的"顺序"按钮, 那么此红色提示依然存在,显然是无法忍受的,那么怎么去除呢, 这里也用到一个vue的一个语法watch,从字面意思上理解就是起到监控的作用,监控这个diaLog对话框的打开和关闭. 在 &
-
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
先上三张效果图: 这些功能在Java Web开发中可能是经常需要的,虽然很简单却使很实用的功能,这里记录下以免忘记. 1. 先说表单提交前验证:后台经常用到(这里是提交后统一验证,及时验证请参考我另一篇文章 http://blog.csdn.net/jianzhonghao/article/details/52503431) 1.1 通过submit 按钮提交后 会根据form的属性action="路径"来跳转到相应的路径,这时,给form添加一个 onsubmit =&quo
随机推荐
- 正则表达式搭配js轻松处理json文本方便而老古
- 常见的数字验证正则表达式整理
- Python使用shelve模块实现简单数据存储的方法
- 动态加载iframe
- 深入解析Go语言的io.ioutil标准库使用
- 简单的ASP中经常用到的代码[推荐]第1/4页
- Android创建Menu菜单实例
- BootStrap智能表单实战系列(三)分块表单配置详解
- node.js中使用q.js实现api的promise化
- 如何显示当天日期
- 用jquery生成二级菜单的实例代码
- 微信或手机浏览器在线显示office文件(已测试ios、android)
- mysql 队列 实现并发读
- MySQL中触发器入门简单实例与介绍
- jquery快捷动态绑定键盘事件的操作函数代码
- JQuery点击行tr实现checkBox选中的简单实例
- Bootstrap每天必学之面板
- 老兵新传-各种漏洞的利用和一些搜索参数
- 详解centos6和centos7防火墙的关闭
- SpringBoot定义过滤器、监听器、拦截器的方法