在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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 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
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
jQuery增加自定义函数的方法
2015/07/18 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
python遍历数组的方法小结
2015/04/30 Python
python网络编程之文件下载实例分析
2015/05/20 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
PHP如何对用户密码进行加密
2014/07/31 面试题
毕业生自我鉴定
2013/11/05 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
观看建国大业观后感
2015/06/01 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
详解java如何集成swagger组件
2021/06/21 Java/Android