getFieldDecorator是form表單的一個方法,接收兩個參數
第一個參數是表單對應的字段
第二個是驗證規(guī)則 該方法本身返回一個方法,需要將獲取值的標簽包裹進去
getFieldDecorator ( “自定義控件名”,{ 表單規(guī)則 } ) (“取值標簽”?)
?
<Form.Item>
? ? ? ? {getFieldDecorator('userName', {
? ? ? ? ? initialValue: 'Jack',
? ? ? ? ? rules: [
? ? ? ? ? ? {
? ? ? ? ? ? ? required: true,
? ? ? ? ? ? ? message: '請輸入用戶名',
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? max: 10,
? ? ? ? ? ? ? message: '不得超過10個字符',
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? })(<Input/>)}
? ? ? </Form.Item>
效果:
第二個括號中的組件用一個氣泡組件<Popover></Popover>包裹的時候
監(jiān)聽不到input輸入框內容的變化
?
<Form.Item>
? ? ? ? {getFieldDecorator('userName', {
? ? ? ? ? initialValue: 'Jack',
? ? ? ? ? rules: [
? ? ? ? ? ? {
? ? ? ? ? ? ? required: true,
? ? ? ? ? ? ? message: '請輸入用戶名',
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? max: 10,
? ? ? ? ? ? ? message: '不得超過10個字符',
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? })(
? ? ? ? ? <Popover content={content} title="Title">
? ? ? ? ? ? <Input placeholder="請輸入用戶名" />
? ? ? ? ? </Popover>
? ? ? ? )}
? ? ? </Form.Item>
getFieldValue:文章來源:http://www.zghlxwxcb.cn/news/detail-561192.html
使用getFieldValue的可以獲取由getFieldDecorator綁定的控件的值文章來源地址http://www.zghlxwxcb.cn/news/detail-561192.html
getFieldValue(`rules[${index}].name`) ? //自定義字段名字為變量的時候
getFieldValue('name')
到了這里,關于Antd中的getFieldDecorator用法和注意事項的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!