溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關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框的值了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
