快捷導(dǎo)航

在react項(xiàng)目中使用antd的form組件,動態(tài)設(shè)置input框的值

更新時間：2020年10月24日 10:48:50 作者：Deidei☀️

這篇文章主要介紹了在react項(xiàng)目中使用antd的form組件,動態(tài)設(shè)置input框的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

問題：

創(chuàng)建賬號時，輸入賬號后不搜索直接保存，提示查詢后，再點(diǎn)搜索就不能搜索這個賬號了

原因：

點(diǎn)擊保存之后，對表單進(jìn)行了驗(yàn)證，導(dǎo)致之后請求的數(shù)據(jù)無法在更新到input框中，也就是說即使在state中有值，也不會更新initialValue值，就導(dǎo)致搜索后的值不能正確填入input中，表單也就提交不了。

解決辦法：

不使用initialValue設(shè)置動態(tài)更新的值，而是使用 this.props.form.setFieldValue({name:data}); 用于動態(tài)更新值，就可以解決了。

if (result.code===0) {
 if (result.data) {
  this.props.form.setFieldsValue({name:result.data});
 }
}

ps：

還有一個問題，如果輸入了賬號進(jìn)行搜索后匹配了name，也填入了input框中。但是又修改了賬號，然后直接提交，就會導(dǎo)致賬號和name不匹配，也就是name是存在的，但就不是對應(yīng)的賬號了。會導(dǎo)致保存之后，如果正確的賬號和name已經(jīng)存在，數(shù)據(jù)庫出現(xiàn)數(shù)據(jù)存儲問題。

解決：

給賬號輸入的Input框添加onChange事件，來觸發(fā)如果有改變就清空name框，防止錯誤提交

change = (event) => {
 this.props.form.setFieldsValue({name:''});
}

記錄一下

補(bǔ)充知識：重新封裝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 原因是，這個值發(fā)生變化不會觸發(fā)重新渲染
 // 不能只使用 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項(xiàng)目中使用antd的form組件,動態(tài)設(shè)置input框的值就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: