antdesign中的defaultValue問題

本文转载自 github_36085116 查看原文 2016-12-23 29573 default/ DES/ ant/ design/ 问题

問題描述----------：

在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項就是配置初始值的，用這種方法就可以避免出現緩存問題了。而且獲取表單元素序列化傳給后台更加方便。

注意！

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

淺解js中的defaultValue react中defaultValue設置無效 AntDesign 的 Table 組件的 expandedRowRender 屬性失效的問題 AntDesign使用遇到問題整理 DataTable新增列設置DefaultValue問題。 Settings Bundle 中的 DefaultValue 和 Root.plist react中實現原生enter/回車事件及antdesign組件實現方式 nodejs - webpack - ReactJS - AntDesign 項目搭建環境並運用到thinkphp5框架代碼中 AntDesign從入門到精通 iOS學習爬坑記錄20：setting bundle中的DefaultValue與registerDefaults方法注冊值不一致