在react项目中使用antd的form组件,动态设置input框的值
时间：2021-11-23 11:45:51 | 栏目：vue | 点击：次
问题：
创建账号时，输入账号后不搜索直接保存，提示查询后，再点搜索就不能搜索这个账号了
原因：
点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到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