在react项⽬中使⽤antd的form组件，动态设置input框的值问题：
创建账号时，输⼊账号后不搜索直接保存，提⽰查询后，再点搜索就不能搜索这个账号了
原因：
点击保存之后，对表单进⾏了验证，导致之后请求的数据⽆法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填⼊input中，表单也就提交不了。
解决办法：
不使⽤initialValue设置动态更新的值，⽽是使⽤ this.props.form.setFieldValue({name:data}); ⽤于动态更新值，就可以解决了。
if (de===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)
}
input框禁止输入}
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框的值就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。