在react项目中使用antd的form组件,动态设置input框的值


Posted in Javascript onOctober 24, 2020

问题:

创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了

在react项目中使用antd的form组件,动态设置input框的值

原因:

点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了。

解决办法:

不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了。

if (result.code===0) {
 if (result.data) {
  this.props.form.setFieldsValue({name:result.data});
 }
}

ps:

还有一个问题,如果输入了账号进行搜索后匹配了name,也填入了input框中。但是又修改了账号,然后直接提交,就会导致账号和name不匹配,也就是name是存在的,但就不是对应的账号了。会导致保存之后,如果正确的账号和name已经存在,数据库出现数据存储问题。

解决:

给账号输入的Input框添加onChange事件,来触发如果有改变就清空name框,防止错误提交

change = (event) => {
 this.props.form.setFieldsValue({name:''});
}

记录一下

补充知识:重新封装Antd Input组件,解决中文输入问题

我就废话不多说了,大家还是直接看代码吧~

import React, { useState, useEffect } from 'react'
import { Input } from 'antd'
function BaseHOC(key) {
 return function(props) {
 const { defaultValue, value, onChange } = props
 const hasValue = props.hasOwnProperty('value')
 // 用户切换到底是显示 value 还是 input
 // 不能直接用 isOnComposition 原因是,这个值发生变化不会触发重新渲染
 // 不能只使用 flag 原因是,setFlag 是异步的
 const [flag, setFlag] = useState(false)
 // 非中文输入时候显示 value。中文输入的时候显示 input
 const [input, setInput] = useState(hasValue ? value : defaultValue)
 useEffect(
 function() {
 if (hasValue && input !== value) {
  setInput(value)
 }
 },
 [value]
 )
 let isOnComposition = false
 function handleChange(e) {
 setInput(e.target.value)
 if (isOnComposition) return
 onChange && onChange(e)
 }
 function handleComposition(e) {
 if ('compositionend' === e.type) {
 isOnComposition = false
 handleChange(e)
 } else {
 isOnComposition = true
 }
 if (flag !== isOnComposition) {
 setFlag(isOnComposition)
 }
 }
 let Component = Input
 if (key) {
 Component = Input[key]
 }
 return (
 <Component
 {...props}
 value={hasValue && !flag ? value : input}
 onCompositionStart={handleComposition}
 onCompositionUpdate={handleComposition}
 onCompositionEnd={handleComposition}
 onChange={handleChange}
 />
 )
 }
}

const Component = function(props) {
 return BaseHOC()(props)
}

Component.Search = function(props) {
 return BaseHOC('Search')(props)
}

Component.TextArea = function(props) {
 return BaseHOC('TextArea')(props)
}

Component.Password = Input.Password
Component.Group = Input.Group
export default Component

以上这篇在react项目中使用antd的form组件,动态设置input框的值就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 拾漏补遗
Dec 27 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
JS画5角星方法介绍
Sep 17 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 #Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 #Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 #Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 #Javascript
vue中是怎样监听数组变化的
Oct 24 #Javascript
JSON stringify方法原理及实例解析
Oct 23 #Javascript
vue中使用腾讯云Im的示例
Oct 23 #Javascript
You might like
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Python中如何引入第三方模块
2020/05/27 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
介绍一下Mysql的存储引擎
2015/02/12 面试题
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
风险评估实施方案
2014/03/09 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
谢师宴学生致辞
2015/07/27 职场文书
宿舍管理制度范本
2015/08/07 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
品德与社会教学反思
2016/02/24 职场文书