在使用 antd-mobile 的 InputItem?組件的時候需要引入受控組件 rc-form
npm install rc-form
rc-form?有幾個常用的方法:?
getFieldProps????????這個方法接收兩個參數(shù)号阿，第一個是表單的字段對象斟珊，第二個是驗(yàn)證規(guī)則写妥。
getFieldDecorator? ??????這個方法接收兩個參數(shù)拳球，第一個是表單的字段對象，第二個是驗(yàn)證規(guī)則珍特。
getFieldValue????????用this.props.form.getFieldValue('變量名')的方式進(jìn)行獲取祝峻，注意：‘變量名’這個參數(shù)只能由getFieldDecorator所設(shè)定的。
getFieldProps?和?getFieldDecorator?在使用的時候方式區(qū)別
getFieldProps?的使用方式
<input {...getFieldProps('username', { onChange(){}, rules: [{required: true}], })}/>?
getFieldDecorator?的使用方式(推薦使用)
getFieldDecorator('userName',{ initialValue:'', rules:[ { required:true, message:'用戶名不能為空' }, { min:5,max:10, message:'長度不在范圍內(nèi)' }, { pattern:new RegExp('^\\w+$','g'), message:'用戶名必須為字母或者數(shù)字' } ] })
( <Input prefix={<Icon type="user"/>} placeholder="請輸入用戶名" />
)
注意兩種使用方式的標(biāo)簽位置不一樣扎筒。
