antdesign中的defaultValue問題


問題描述----------:

在react項目中使用antdesign組件,遇到需要給表單元素設置初始值的場景時,官方提供的方法中有一種是使用defaultValue屬性。例如:

import { Input } from 'antd';
const InputGroup = Input.Group;

ReactDOM.render(
<div>
<InputGroup>
<Input defaultValue="0456" />
<Input defaultValue="7579976" />
</InputGroup>
</div>
, mountNode);

由於redux的store中可能會有state的緩存,導致用上面方法設置的初始值,會有類似於緩存的問題。也就是說,我先進行操作A,store中存儲了一些值,之后進行操作B去后台拿數據且進入新的頁面並給表單賦初始值,但發現表單的初始值還是操作A中的那些值。

貌似這是antdesign的一個設計不足或者bug,目前用redux+defaultValue就是會遇到這樣的問題。

解決方案----------:

antdesign的Form組件中提供了一種雙向數據綁定方法getFieldDecrator,直接上代碼:

<Form onSubmit={this.handleAdd.bind(this)}>
<FormItem style={{display: 'inline-block'}}>
{getFieldDecorator('labNo', { initialValue: '7579976' })(
<Input placeholder="實驗室編號:" />
)}
</FormItem>
</Form>

getFieldDecrator這個方法中的initialValue項就是配置初始值的,用這種方法就可以避免出現緩存問題了。而且獲取表單元素序列化傳給后台更加方便。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com