解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
如果在Form表單中onChange事件中，手寫了一個(gè)setFieldsValue, 則不會生效。
原因是因?yàn)?/h3>
Form表單會在手寫的onChange事件之后執(zhí)行內(nèi)部的setFieldsValue，所以會將我們之前手寫的setFieldsValue給覆蓋掉。
解決方案
1. 使用setTimeout延時(shí)。此方案不推薦
2. 使用getValueFromEvent. 是當(dāng)onChange的時(shí)候，更改form表單的值的情景下使用
<FormItem label="路由節(jié)點(diǎn)" {...nodelayout}>
? ? ?{getFieldDecorator(`node`, {
? ? ? ? rules: [
? ? ? ? ? ?{
? ? ? ? ? ? ? required: true,
? ? ? ? ? ? ? message: '選擇要指定的路由節(jié)點(diǎn)',
? ? ? ? ? ? }],
? ? ? ? getValueFromEvent: (val: any) => {
? ? ? ? ? ? let nodesArr = [] as any;
? ? ? ? ? ? ?for (let item of transferList) {
? ? ? ? ? ? ? ? ?for (let j of val) {
? ? ? ? ? ? ? ? ? ? if ((item as any).id === j) {
? ? ? ? ? ? ? ? ? ? ? nodesArr.push(item);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ?}
? ? ? ? ? ? ?return nodesArr;
? ? ? ? }
? ? ?})(
? ? <Transfer
? ? ? ?operations={['>>', '<<']}
? ? ? ?dataSource={transferList}
? ? ? ?filterOption={(inputValue: any, option: any) =>
? ? ? ? ? option.value.indexOf(inputValue) > -1
? ? ? ?}
? ? ? ?showSearch
? ? ? ?lazy={false}
? ? ? ?targetKeys={targetKeys}
? ? ? ?onChange={transferHandleChange}
? ? ? ?onSearch={transferHandleSearch}
? ? ? ?render={item => item.value}
? ? />,
)}
</FormItem>3. 如果你只想簡單的更改表單的值setFieldsValue，而不是在onChange的時(shí)候觸發(fā)。那么可以使用normalize. 與上述的getValueFromEvent類似，都是option的一個(gè)屬性。
antd Design Form setFieldsValue的使用
最近項(xiàng)目使用的是antd Design 4.x 版本，碰到個(gè)需要加載后端數(shù)據(jù)并展示，并且用戶可以進(jìn)行修改的需求，前端采用的是antd的Form表單來實(shí)現(xiàn)
組件加載的時(shí)候向后端請求數(shù)據(jù)
componentDidMount() {
? ? ? ? gainCountry().then(res => {
?? ??? ??? ?// 這里進(jìn)行數(shù)據(jù)請求
?? ??? ??? ?......
? ? ? ? })
? ? }form表單要回填數(shù)據(jù)一般會想到的是initialValues，但是這是適用于初始化值的時(shí)候，官方文檔的原話：“initialValues 不能被 setState 動態(tài)更新，你需要用 setFieldsValue 來更新”。
搜索一番setFieldsValue的使用，基本上都是：this.props.form.setFieldsValue, props自帶form，試用之后發(fā)現(xiàn)報(bào)錯(cuò)，this.props下沒有form，這個(gè)好像只適用于antd 3.x
解決
antd4.x 中使用setFieldsValue 是通過ref來進(jìn)行操作，如下所示：
class Index extends Component{
?? ?constructor(props) {
? ? ? ? super(props)
? ? ? ? this.state = { }
? ? }
? ? // 創(chuàng)建一個(gè)ref
? ? formRef = React.createRef()
? ? render(){
? ? ?? ?return{
? ? ?? ? ? ? {/* 綁定到Form身上*/}
? ? ? ? ?? ? <Form ref={this.formRef}>
? ? ? ? ? ? ? ? <Form.Item name="example">
? ? ? ? ? ? ? ? ? ?<Input />
? ? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? ?</Form>
? ? ? ? }
? ? }
}
export default BaseInfo在需要的地方進(jìn)行使用：
// example 為Form.Item中的name
this.formRef.current.setFieldsValue({
? ? ? ?example: ‘從后臺返回要顯示的值',
?? ??? ??? ??? ?
})結(jié)束語
官方文檔中都是有相關(guān)說明的，setFieldsValue 的使用我是在文檔中的一個(gè)例子中找到的，碰到問題的時(shí)候還是要多閱讀文檔
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue加載動畫element ui V-loading屬性的踩坑記錄
這篇文章主要介紹了vue加載動畫element ui V-loading屬性方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了用Vue編寫抽象組件的方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法
這篇文章主要介紹了實(shí)現(xiàn)一個(gè) Vue 吸頂錨點(diǎn)組件方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了Vue移動端右滑屏幕返回上一頁，本文結(jié)合實(shí)例給大家介紹的非常詳細(xì)，并附有源碼下載,需要的朋友可以參考下2019-06-06
vue配置nprogress實(shí)現(xiàn)頁面頂部進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue配置nprogress實(shí)現(xiàn)頁面頂部進(jìn)度條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過實(shí)例代碼案例給大家詳細(xì)介紹，需要的朋友可以參考下2021-07-07
在現(xiàn)代應(yīng)用程序中，日志是一項(xiàng)重要的功能，用于幫助開發(fā)人員和運(yùn)維人員了解應(yīng)用程序的行為并進(jìn)行故障排除，本文將介紹如何在Vue應(yīng)用程序中實(shí)現(xiàn)分布式日志管理和日志分析功能，感興趣的可以了解一下2023-06-06
隨著現(xiàn)在vue3越來越普及，相應(yīng)的面試題也多了起來。說到vue3的面試題，有一個(gè)最經(jīng)典的就是對于實(shí)現(xiàn)ref和reactive這兩個(gè)方法的底層原理，本文就來和大家簡單講講吧2023-04-04
這篇文章主要介紹了vue3使用mqtt的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
Vue數(shù)據(jù)變化監(jiān)聽錯(cuò)誤的常見原因與解決方案
在?Vue.js?開發(fā)中,watch?是一個(gè)強(qiáng)大的工具,用于監(jiān)聽數(shù)據(jù)的變化并執(zhí)行相應(yīng)的操作,然而,許多開發(fā)者在使用?watch?時(shí)會遇到數(shù)據(jù)變化未被正確監(jiān)聽的問題,這可能導(dǎo)致程序邏輯錯(cuò)誤或視圖更新失敗,本文將探討這些問題的常見原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下2025-03-03