在antd中setFieldsValue和defaultVal的用法
代碼如下:
componentWillMount() { this.props.form.setFieldsValue({ phone: this.props.maintain.account.phone, email: this.props.maintain.account.email }); console.log(this.props.form.setFieldsValue); }
打印出來
function setFieldsValue(fieldsValue) { var newFields = {}; var fieldsMeta = this.fieldsMeta, fields = this.fields; var virtualPaths = (0, _utils.getVirtualPat… undefined
更神奇的是這段代碼本來運(yùn)行的好好的一點(diǎn)問題都沒有,在同事的電腦上卻會(huì)出現(xiàn)如上問題,我的電腦也出現(xiàn)了這個(gè)問題但是代碼沒改過
后來就這樣設(shè)置代碼的默認(rèn)值,就顯示出來了
一定要加一個(gè)<div></div>
<FormItem {...formItemLayout} label="手機(jī)號(hào)" > {getFieldDecorator('phone', { rules: [{ required: false, message: '請輸入您的手機(jī)號(hào)!' }] })( <div> <Input className="content_style" addonBefore={<Icon type="mobile" />} defaultValue={maintain.account.phone} /> </div> )} </FormItem>
補(bǔ)充知識(shí):antd4中Form組件initialValues設(shè)置初始值無效,使用setFieldsValue動(dòng)態(tài)賦值,getFieldsValus動(dòng)態(tài)獲取值
首先說明initialValues這個(gè)屬性,這個(gè)屬性antd官方給的是設(shè)置Form組件初始值,但是有個(gè)問題如果值從后端請求那么initialValues可能會(huì)設(shè)置不上,如果說用匿名組件的話,修改From組件會(huì)導(dǎo)致一系列問題,
接下來就是用到了setFieldsValue和getFieldsValus屬性
在antd官網(wǎng)中說明form組件不能使用this.setState修改值,
只能通過setFieldsValue來設(shè)置,
通過getFieldsValus來獲取
首先通過getFieldsValus來動(dòng)態(tài)獲取值
export default class List extends Component { //第一步 formRef = React.createRef(); }
第二步
使用ref
<Form {...layout} name="basic" //這里 formRef在第一步中可以看到 ref={this.formRef} //initialValues 設(shè)置初始值 initialValues={this.state.formInitValues} //validateMessages 統(tǒng)一處理錯(cuò)誤信息 validateMessages={this.validateMessages} //form submit點(diǎn)擊之后成功回調(diào) onFinish={onFinish} //form submit點(diǎn)擊之后失敗回調(diào) onFinishFailed={onFinishFailed} > </Form>
使用setFieldsValue
注意:sell_linkman是Form中item的字段名,需要給那個(gè)字段賦值用這個(gè)就ok,可以寫在你事件中
this.formRef.current.setFieldsValue({ sell_linkman: value, })
使用getFieldsValue
‘sell_linkman'是form中item字段名
this.formRef.current.getFieldsValue('sell_linkman')
以上這篇在antd中setFieldsValue和defaultVal的用法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄及解決方法
這篇文章主要介紹了vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄,本文通過場景分析給大家分享解決方法,需要的朋友可以參考下2022-08-08如何刪除vue項(xiàng)目下的node_modules文件夾
這篇文章主要介紹了如何刪除vue項(xiàng)目下的node_modules文件夾,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue中使用elementUI組件手動(dòng)上傳圖片功能
Vue是一套構(gòu)建用戶界面的框架, 開發(fā)只需要關(guān)注視圖層, 它不僅易于上手,還便于與第三方庫或既有項(xiàng)目的整合。這篇文章主要介紹了vue中使用elementUI組件手動(dòng)上傳圖片,需要的朋友可以參考下2019-12-12