TextareaItem 多行输入

用于接受多行文本。

规则

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

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

代码演示

示例集合

(rc-form 文档) 

  1. import { List, TextareaItem } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  4. let TextareaItemExample = React.createClass({
  5.   render() {
  6.     const { getFieldProps } = this.props.form;
  7.     return (<List>
  8.       <TextareaItem
  9.         title="标题"
  10.         placeholder="请输入"
  11.         data-seed="logId"
  12.         autoFocus autoHeight
  13.       />
  14.       <TextareaItem
  15.         {...getFieldProps('control')}
  16.         title="标题"
  17.         placeholder="请输入（受控）"
  18.       />
  20.       <TextareaItem
  21.         {...getFieldProps('clear1')}
  22.         clear
  23.         title="标题"
  24.         placeholder="输入会显示清除按钮"
  25.       />
  27.       <TextareaItem
  28.         {...getFieldProps('note8', {
  29.           initialValue: '报错样式',
  30.         })}
  31.         title="报错样式"
  32.         rows={5}
  33.         error
  34.         onErrorClick={() => { alert('点击报错'); }}
  35.         count={100}
  36.       />
  38.       <TextareaItem
  39.         {...getFieldProps('note2')}
  40.         title="单行显示"
  41.         placeholder="请填写"
  42.       />
  43.       <TextareaItem
  44.         {...getFieldProps('note4')}
  45.         placeholder="最多输入10个字符"
  46.         count={10}
  47.       />
  48.       <TextareaItem
  49.         {...getFieldProps('count', {
  50.           initialValue: '计数功能,我的意见是...',
  51.         })}
  52.         rows={5}
  53.         count={100}
  54.       />
  56.       <TextareaItem
  57.         {...getFieldProps('note3')}
  58.         title="高度自适应"
  59.         autoHeight
  60.         labelNumber={5}
  61.       />
  62.       <TextareaItem
  63.         {...getFieldProps('note1')}
  64.         rows={3}
  65.         placeholder="固定行数,rows"
  66.       />
  67.       <TextareaItem
  68.         {...getFieldProps('title3')}
  69.         title={<img src="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png" style={{ width: '0.56rem', height: '0.56rem' }} />}
  70.         placeholder="标题可以自定义"
  71.       />
  73.       <TextareaItem
  74.         {...getFieldProps('note6', {
  75.           initialValue: '不可编辑',
  76.         })}
  77.         title="姓名"
  78.         editable={false}
  79.       />
  80.       <TextareaItem
  81.         value="这个是禁用的样式"
  82.         title="姓名"
  83.         disabled
  84.       />
  85.     </List>);
  86.   },
  87. });
  89. TextareaItemExample = createForm()(TextareaItemExample);
  91. ReactDOM.render(<TextareaItemExample />, mountNode);
  1. .demoTitle:before,
  2. .demoTitle:after {
  3.   border-bottom: none;
  4. }

TextareaItem多行输入 - 图1

API ( 适用平台：WEB、React-Native )

成员说明类型默认值
title文案说明String/node''
valuevalue 值(受控与否参考https://facebook.github.io/react/docs/forms.html)String无
defaultValue设置初始默认值String-
placeholderplaceholderString''
editable是否可编辑booltrue
disabled是否禁用boolfalse
clear是否带清除功能booltrue
rows显示几行number1
count计数功能,兼具最大长度,默认为0,代表不开启计数功能number-
onChangechange 事件触发的回调函数(val: string): void-
onBlurblur 事件触发的回调函数(val: string): void-
onFocusfocus 事件触发的回调函数(val: string): void-
error报错样式boolfalse
onErrorClick点击报错 icon 触发的回调(): void无
autoHeight高度自适应, autoHeight 和 rows 请二选一boolfalse
labelNumber定宽枚举值：num * @input-label-width: 34px，可用2-7之间的数字，一般(不能保证全部)能对应显示出相应个数的中文文字(不考虑英文字符)number4
name (web only)textarea 的 nameString-
prefixListCls (web only)列表 className 前缀Stringam-list

更多属性请参考 react-native TextInput (http://facebook.github.io/react-native/docs/textinput.html)