react项目中如何使用antd的form组件,动态设置input框的值
发布时间：2020-10-26 14:20:54
来源：亿速云
阅读：123
这期内容当中小编将会给大家带来有关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 (
{...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框的值了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。

问题：
创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了
原因：
点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到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 (
{...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框的值就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

今天项目的搜索框，敲击回车后，竟然刷新了页面，并没有跳转到想要的页面，后来发现是因为搜索框在一个form表单里面，action没有写url，相当于敲击回车响应了表单提交事件，所以
$('#search input[name="k"]').keydown(function(){
				if(event.keyCode==13){
					var name=$("#k").val();
					 var url=base+'getSubjectsByName.action?name='+name;
					 window.location.href=encodeURI(url);
					
				}

			});
并没有成功执行。改的办法是在keydown 里面加一个return false；就不响应表单提交事件了。

$('#search input[name="k"]').keydown(function(){
				if(event.keyCode==13){
					var name=$("#k").val();
					 var url=base+'getSubjectsByName.action?name='+name;
					 window.location.href=encodeURI(url);
					return false;
				}

			});

问题
部署好的项目在chrome中打开，出现了黑色边框。界面用的是elementUI，使用抽屉组件是出现了这种情况，其他的表单组件均正常

原因
通过搜索资料，确定是chrome浏览器本身问题。

资料显示这是最近chrome浏览器更新83新版本产生的问题：

Chrome83版本对表单控件进行了视觉效果的更新，当文本输入框处于焦点以及选定下拉菜单中的选项时，浏览器会在它们周围显示一个“黑框”，以突出表单中的这些内容。
后来在CSDN上看见有个童鞋发帖说：这个问题已经反馈给了Google，在Chrome84 Dev中已经将该问题解决，按道理说等84版本更新后问题就会消失。

然鹅…我去更新了84版本——


哎，黑框它还在…我们还是靠自己去解决吧~ - ~

方法 ① ：

我们可以在每个表单控件的css样式中添加如下一行：
outline:none;

这行代码作用是去掉表单元素获取焦点后自动添加的边框.
方法 ② ：（不推荐）

进入chrome浏览器的实验室界面修改相关设置。

地址为：chrome://flags/#form-controls-refresh （当然用chrome打开）


进行如图设置，禁用掉 Web Platform Controls updated UI 这项更新，然后重启chrome即可。

这个方法治标不治本，你无法修改客户打开网页所使用的浏览器。在其他电脑上仍会有问题。方法1才是真爱。

本文章参考链接：https://blog.csdn.net/JZevin/article/details/107371372