在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
更神奇的是這段代碼本來運行的好好的一點問題都沒有,在同事的電腦上卻會出現(xiàn)如上問題,我的電腦也出現(xiàn)了這個問題但是代碼沒改過
后來就這樣設(shè)置代碼的默認(rèn)值,就顯示出來了
一定要加一個<div></div>
<FormItem {...formItemLayout} label="手機號" > {getFieldDecorator('phone', { rules: [{ required: false, message: '請輸入您的手機號!' }] })( <div> <Input className="content_style" addonBefore={<Icon type="mobile" />} defaultValue={maintain.account.phone} /> </div> )} </FormItem>
補充知識:antd4中Form組件initialValues設(shè)置初始值無效,使用setFieldsValue動態(tài)賦值,getFieldsValus動態(tài)獲取值
首先說明initialValues這個屬性,這個屬性antd官方給的是設(shè)置Form組件初始值,但是有個問題如果值從后端請求那么initialValues可能會設(shè)置不上,如果說用匿名組件的話,修改From組件會導(dǎo)致一系列問題,
接下來就是用到了setFieldsValue和getFieldsValus屬性
在antd官網(wǎng)中說明form組件不能使用this.setState修改值,
只能通過setFieldsValue來設(shè)置,
通過getFieldsValus來獲取
首先通過getFieldsValus來動態(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)一處理錯誤信息 validateMessages={this.validateMessages} //form submit點擊之后成功回調(diào) onFinish={onFinish} //form submit點擊之后失敗回調(diào) onFinishFailed={onFinishFailed} > </Form>
使用setFieldsValue
注意:sell_linkman是Form中item的字段名,需要給那個字段賦值用這個就ok,可以寫在你事件中
this.formRef.current.setFieldsValue({ sell_linkman: value, })
使用getFieldsValue
‘sell_linkman'是form中item字段名
this.formRef.current.getFieldsValue('sell_linkman')
以上這篇在antd中setFieldsValue和defaultVal的用法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄及解決方法
這篇文章主要介紹了vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄,本文通過場景分析給大家分享解決方法,需要的朋友可以參考下2022-08-08