閱讀Form元件

2021-09-24 03:26:46 字數 2080 閱讀 7834

form.create(options)

onfieldschange

onvalueschange

this.props.form提供的 api(舉常用的)

方法說明

型別getfielddecorator

用於和表單進行雙向繫結

getfieldsvalue

獲取一組輸入控制項的值,如不傳入引數,則獲取全部元件的值

function([fieldnames: string])

resetfields

重置一組輸入控制項的值(為initialvalue)與狀態,如不傳入引數,則重置所有元件

function([names: string])

setfieldsvalue

設定一組輸入控制項的值(注意:不要在componentwillreceiveprops內使用,否則會導致死迴圈。

() => void

validatefields/validatefieldsandscroll

校驗並獲取一組輸入域的值與 error,若 fieldnames 引數為空,則校驗全部元件

---------------------------------

validatefields相似,但校驗完後,如果校驗不通過的選單域不在可見範圍內,則自動滾動進可見範圍

[fieldnames: string],

[options: object],

callback(errors, values)

) => void

其中 options 引數如下:

getfielddecorator(id, options)  

id:必填輸入控制項唯一標誌。支援巢狀式的寫法。 

)()}
form.item

校驗規則 options:

type: 

function formcomponent(props)  = props.form;

const handlesubmit = e =>

});};

return()

}const formwrap = form.create(;

object.keys(props.datasource).map(key => );

});return formdata;

},validatemessages: ,

onfieldschange: (props, changedfields, allfields) => ;

object.keys(changedfields).foreach(key => );

// formdata為表單項的鍵值

},onvalueschange: (props, changedvalues, allvalues) =>

})(formcomponent);

function enhancedform(props, ref) ,(err, values) => resolve(err, values));

}),setfieldsvalue: formwrapref.current.setfieldsvalue,

resetfields: formwrapref.current.resetfields

}));

return (

)}enhancedform = forwardref(enhancedform);

export default enhancedform;

// 父元件

const formref = useref();

const submitform = () => ).then((err, values) =>

});} const resetform = () =>

const setfieldsvalue = (params) => );

} return (

提交form

重置form

setfieldsvalue(, ]})}>設定**號碼

);}

form元件詳解下

一 ext.form.field.hidden 隱藏字段,不展示,但是其值提交 ext.onready function 七 ext.form.field.file 上傳檔案,由於沒有後台,只能展示前台效果。submit提交後,可以在後台接受。ext.onready function ext.qui...

form表單 常用元件

action 後台介面位址。method 用來提交表單的http方法 get方法 引數傳遞較少,引數拼接在url後面,通過?來分割 post方法 引數傳遞較多 引數儲存在請求體中 較為安全 enctype編碼格式 input 屬性type,name,value,checked,disabled ty...

Form元件引數配置

定製模板中的顯示樣式,及配置類 widget widgets.passwordinput attrs 錯誤資訊中文顯示 error messages class myform forms.form 校驗這個字段,最大長度是32,最小長度是3 name forms.charfield required...