InputItem 文本输入

用于接受单行文本。

规则

  • 支持通过键盘或者剪切板输入文本。

  • 通过光标可以在水平方向进行移动。

  • 对特定格式的文本进行处理，eg：隐藏密码。

代码演示

基本

输入框 (rc-form 文档) 

  1. import { List, InputItem } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  4. let BasicInputExample = React.createClass({
  5.   onClick() {
  6.     console.log(this.props.form.getFieldsValue());
  7.   },
  8.   render() {
  9.     const { getFieldProps } = this.props.form;
  11.     return (<div>
  12.       <List
  13.         title="基本"
  14.       >
  15.         <List.Body>
  16.           <InputItem
  17.             placeholder="设置defaultValue,不设置value"
  18.             clear
  19.             maxLength={10}
  20.             defaultValue=""
  21.             onBlur={(value) => { console.log('onBlur'); console.log(value); }}
  22.             onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  23.             onChange={(value) => { console.log('onChange'); console.log(value); }}
  24.           >非受控</InputItem>
  25.           <InputItem
  26.             {...getFieldProps('input1', {
  27.               initialValue: '',
  28.             })}
  29.             placeholder="设置value,不设置defaultValue"
  30.             clear
  31.             maxLength={10}
  32.             onBlur={(value) => { console.log('onBlur'); console.log(value); }}
  33.             onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  34.           >受控</InputItem>
  35.           <InputItem
  36.             value="editable={false}"
  37.             editable={false}
  38.           >不可编辑</InputItem>
  39.           <InputItem
  40.             value="disabled={true}"
  41.             disabled
  42.           >禁用状态</InputItem>
  43.           <InputItem
  44.             {...getFieldProps('input2', {
  45.               initialValue: '标签可以是node',
  46.             })}
  47.             placeholder="标签可以是node"
  48.           >
  49.             <div style={{ backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/zumwvwrngNMGSWe.png)', backgroundSize: 'cover', height: '0.44rem', width: '0.44rem' }} />
  50.           </InputItem>
  51.           <InputItem
  52.             {...getFieldProps('input3', {
  53.               initialValue: '',
  54.             })}
  55.             clear
  56.             placeholder="无标签"
  57.           />
  58.           <InputItem
  59.             {...getFieldProps('input4', {
  60.               initialValue: '',
  61.             })}
  62.             clear
  63.             placeholder="extra"
  64.             extra="元"
  65.           >带注释</InputItem>
  66.           <InputItem
  67.             {...getFieldProps('input5', {
  68.               initialValue: '',
  69.             })}
  70.             placeholder="注释可以是node"
  71.             clear
  72.             extra={<img src="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png" />}
  73.           >带注释</InputItem>
  74.           <InputItem
  75.             {...getFieldProps('input6', {
  76.               initialValue: '输入框',
  77.             })}
  78.             clear
  79.             placeholder="clear"
  80.           >清除功能</InputItem>
  81.           <InputItem
  82.             {...getFieldProps('input7', {
  83.               initialValue: '校验出错',
  84.             })}
  85.             error
  86.             onErrorClick={() => { alert('点击报错'); }}
  87.             errorMsg="校验出错"
  88.             clear
  89.             placeholder="内容"
  90.           >报错样式</InputItem>
  91.         </List.Body>
  92.       </List>
  93.       <List
  94.         title="固定标签字数"
  95.       >
  96.         <List.Body>
  97.           <InputItem
  98.             {...getFieldProps('label2', {
  99.               initialValue: '',
  100.             })}
  101.             placeholder="内容"
  102.             clear
  103.             maxLength={10}
  104.             labelNumber={2}
  105.             onBlur={(value) => { console.log('onBlur'); console.log(value); }}
  106.             onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  107.           >姓名</InputItem>
  108.           <InputItem
  109.             {...getFieldProps('label3', {
  110.               initialValue: '',
  111.             })}
  112.             placeholder="内容"
  113.             clear
  114.             maxLength={10}
  115.             labelNumber={3}
  116.             onBlur={(value) => { console.log('onBlur'); console.log(value); }}
  117.             onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  118.           >校验码</InputItem>
  119.           <InputItem
  120.             {...getFieldProps('label4', {
  121.               initialValue: '',
  122.             })}
  123.             placeholder="默认"
  124.             clear
  125.             maxLength={10}
  126.             onBlur={(value) => { console.log('onBlur'); console.log(value); }}
  127.             onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  128.           >四字标签</InputItem>
  129.           <InputItem
  130.             {...getFieldProps('label5', {
  131.               initialValue: '',
  132.             })}
  133.             placeholder="内容"
  134.             clear
  135.             maxLength={10}
  136.             labelNumber={5}
  137.             onBlur={(value) => { console.log('onBlur'); console.log(value); }}
  138.             onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  139.           >五个字标签</InputItem>
  140.           <InputItem
  141.             {...getFieldProps('label6', {
  142.               initialValue: '',
  143.             })}
  144.             placeholder="内容"
  145.             clear
  146.             maxLength={10}
  147.             labelNumber={6}
  148.             onBlur={(value) => { console.log('onBlur'); console.log(value); }}
  149.             onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  150.           >六个字标签六</InputItem>
  151.           <InputItem
  152.             {...getFieldProps('label7', {
  153.               initialValue: '',
  154.             })}
  155.             placeholder="内容"
  156.             clear
  157.             maxLength={10}
  158.             labelNumber={7}
  159.             onBlur={(value) => { console.log('onBlur'); console.log(value); }}
  160.             onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  161.           >七个字标签七个</InputItem>
  162.         </List.Body>
  163.       </List>
  164.     </div>);
  165.   },
  166. });
  168. BasicInputExample = createForm()(BasicInputExample);
  169. ReactDOM.render(<BasicInputExample />, mountNode);

格式

支持银行卡(type="bankCard"), 手机号码(type="phone"), 密码(type="password"),数字(type="number") 四种类型的格式. (rc-form 文档) 

  1. import { List, InputItem } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  4. let FormatExample = React.createClass({
  5.   render() {
  6.     const { getFieldProps } = this.props.form;
  7.     return (<List>
  8.       <List.Header>格式</List.Header>
  9.       <List.Body>
  10.         <InputItem
  11.           {...getFieldProps('bankCard', {
  12.             initialValue: '8888 8888 8888 8888',
  13.           })}
  14.           type="bankCard"
  15.           placeholder="8888 8888 8888 8888"
  16.           clear
  17.           onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  18.           onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  19.         >银行卡</InputItem>
  20.         <InputItem
  21.           {...getFieldProps('phone', {
  22.             initialValue: '186 1234 1234',
  23.           })}
  24.           type="phone"
  25.           placeholder="186 1234 1234"
  26.           clear
  27.           onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  28.           onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  29.         >手机号码</InputItem>
  30.         <InputItem
  31.           {...getFieldProps('password', {
  32.             initialValue: '123131',
  33.           })}
  34.           type="password"
  35.           placeholder="****"
  36.           clear
  37.           onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  38.           onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  39.         >密码</InputItem>
  40.         <InputItem
  41.           {...getFieldProps('number', {
  42.             initialValue: '123131',
  43.           })}
  44.           type="number"
  45.           placeholder="123131"
  46.           clear
  47.           onBlur={function (e) { console.log('onBlur'); console.log(e); }}
  48.           onFocus={function (e) { console.log('onFocus'); console.log(e); }}
  49.         >数字键盘</InputItem>
  50.       </List.Body>
  51.     </List>);
  52.   },
  53. });
  55. FormatExample = createForm()(FormatExample);
  57. ReactDOM.render(<FormatExample />, mountNode);

InputItem文本输入 - 图1

API

成员说明类型可选值默认值
prefixListClsStringam-list
type格式String银行卡输入bankCard,手机号输入phone（此时最大长度固定为11,maxLength设置无效）,密码输入password,文本输入text, 数字输入number（尽量唤起数字键盘）text
nameinput的nameString无
valuevalue值String是否设置value,决定了该InputItem是否是受控组件,详情请参考https://facebook.github.io/react/docs/forms.html无
defaultValue设置初始默认值String''
editable是否可编辑booltrue
disabled是否禁用boolfalse
placeholderplaceholderString无
clear是否带清除功能bool仅editable为true,disabled为false,value设置才生效false
maxLength最大长度number无
onChangeinput change事件触发的回调函数,参数是valueFunction当组件是受控组件时生效无
onBlurinput blur事件触发的回调函数,参数是valueFunction无
onFocusinput focus事件触发的回调函数,参数是valueFunction无
extra右边注释string or node''
onExtraClickextra点击事件触发的回调函数,参数是event对象Function无
error报错样式boolfalse
onErrorClick点击报错icon触发的回调,Function无
labelNumber标签字数（一个表单页面中,通常有多个InputItem,需要统一标签字数以便统一宽度,保持页面整洁、美观）number2, 3, 4, 5, 6, 74
size(本期不实现)尺寸stringlarge,smalllarge
labelPosition(本期不实现)标题方向stringleft,topleft
textAlign(本期不实现)文本对齐stringleft,centerleft