TextareaItem 多行输入

定义／Definition

文本区域可以接收和展示多行文本。

规则 / Rule

  • 文本区域是矩形，可定义为任何高度。当内容太多超出视图的边框时，文本视图支持滚动。

  • 如果文本区域支持用户编辑，当用户轻击文本视图内部时，将唤起键盘。键盘的布局和类型取决于用户的系统语言设置。

代码演示

基本

列表主体内容的容器。 

  1. import { List, TextareaItem } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  4. let TextareaItemExample = React.createClass({
  5.   onClick() {
  6.     console.log(this.props.form.getFieldsValue());
  7.   },
  8.   render() {
  9.     const { getFieldProps } = this.props.form;
  10.     return (
  11.       <div>
  12.         <List>
  13.           <List.Header>多行输入,TextareaItem</List.Header>
  14.           <List.Body>
  15.             <TextareaItem
  16.               {...getFieldProps('note', {
  17.                 initialValue: '',
  18.                 valuePropName: 'value',
  19.               })}
  20.               name="yyy"
  21.               placeholder="如果你有什么建议意见，欢迎你来吐槽"
  22.               clear
  23.               onBlur={() => { console.log('onBlur'); }}
  24.               onFocus={(e) => { console.log('onFocus'); console.log(e); }}
  25.             />
  26.             <TextareaItem
  27.               {...getFieldProps('note3', {
  28.                 initialValue: '',
  29.                 valuePropName: 'value',
  30.               })}
  31.               name="yyy"
  32.               rows={3}
  33.               placeholder="固定行数,rows"
  34.               clear
  35.               onBlur={() => { console.log('onBlur'); }}
  36.               onFocus={(e) => { console.log('onFocus'); console.log(e); }}
  37.             />
  38.             <TextareaItem
  39.               {...getFieldProps('note1', {
  40.                 initialValue: '',
  41.                 valuePropName: 'value',
  42.               })}
  43.               title="带标题"
  44.               labelNumber={4}
  45.               name="yyy"
  46.               placeholder="title"
  47.               clear={false}
  48.               onBlur={() => { console.log('onBlur'); }}
  49.               onFocus={(e) => { console.log('onFocus'); console.log(e); }}
  50.             />
  51.             <TextareaItem
  52.               {...getFieldProps('note2', {
  53.                 initialValue: '',
  54.                 valuePropName: 'value',
  55.               })}
  56.               title="自适应"
  57.               labelNumber={4}
  58.               autoHeight
  59.               clear
  60.               placeholder="高度自适应"
  61.             />
  62.             <TextareaItem
  63.               {...getFieldProps('note4', {
  64.                 initialValue: '',
  65.                 valuePropName: 'value',
  66.               })}
  67.               title="最大长度"
  68.               labelNumber={4}
  69.               count={30}
  70.               clear
  71.               error
  72.               placeholder="count"
  73.             />
  74.             <TextareaItem
  75.               {...getFieldProps('note5', {
  76.                 initialValue: '',
  77.                 valuePropName: 'value',
  78.               })}
  79.               title={<img src="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png" width="28" height="28" />}
  80.               labelNumber={4}
  81.               clear
  82.               placeholder="title类型可以是node"
  83.             />
  84.             <TextareaItem
  85.               {...getFieldProps('note6', {
  86.                 initialValue: '不可编辑',
  87.                 valuePropName: 'value',
  88.               })}
  89.               title="不可编辑"
  90.               labelNumber={4}
  91.               placeholder="editable"
  92.               editable={false}
  93.             />
  94.             <TextareaItem
  95.               {...getFieldProps('note7', {
  96.                 initialValue: '多行输入,带计数功能,count+rows',
  97.                 valuePropName: 'value',
  98.               })}
  99.               title="备注说明"
  100.               labelNumber={4}
  101.               name="yyy"
  102.               rows={5}
  103.               placeholder="计数功能"
  104.               clear
  105.               count={100}
  106.               onBlur={() => { console.log('onBlur'); }}
  107.               onFocus={(e) => { console.log('onFocus'); console.log(e); }}
  108.             />
  109.             <TextareaItem
  110.               {...getFieldProps('note8', {
  111.                 initialValue: '多行输入,带计数功能,count+rows',
  112.                 valuePropName: 'value',
  113.               })}
  114.               title="备注说明"
  115.               labelNumber={4}
  116.               name="yyy"
  117.               rows={5}
  118.               placeholder="计数功能"
  119.               clear
  120.               error
  121.               onErrorClick={() => { alert(21212); }}
  122.               count={100}
  123.               onBlur={() => { console.log('onBlur'); }}
  124.               onFocus={(e) => { console.log('onFocus'); console.log(e); }}
  125.             />
  126.           </List.Body>
  127.         </List>
  128.       </div>
  129.     );
  130.   },
  131. });
  133. TextareaItemExample = createForm()(TextareaItemExample);
  135. ReactDOM.render(<TextareaItemExample />, mountNode);

TextareaItem多行输入 - 图1

API

成员说明类型可选值默认值
prefixListClsStringam-list
type文本区域样式类型String线型hasLine,有边框hasBorder,本期只支持hasLinehasLine
title文案说明String/node''
nametextarea的nameString''
valuetextarea的默认值String''
placeholderplaceholderString''
clear是否带清除功能booltrue
rows显示几行number1
count计数功能,兼具最大长度,默认为0,代表不开启计数功能number
onChangetextarea change事件触发的回调函数,参数是valueFunction
onBlurtextarea blur事件触发的回调函数,参数是valueFunction
onFocustextarea focus事件触发的回调函数,参数是valueFunction
error报错样式boolfalse
onErrorClick点击报错icon触发的回调,Function无
autoHeight高度自适应, autoHeight和rows请二选一boolfalse
editable输入框是否可输入booltrue
labelNumber标签字数（一个表单页面中,通常有多个InputItem或者TextareaItem,需要统一标签字数以便统一宽度,保持页面整洁、美观）number2, 3, 4, 5, 6, 74