TextareaItem 多行输入

用于接受多行文本。

规则

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

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

代码演示

基本

列表主体内容的容器. (rc-form 文档) 

  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 title="多行输入">
  13.           <List.Body>
  14.             <TextareaItem
  15.               title="非受控"
  16.               defaultValue="非受控组件"
  17.               placeholder="非受控组件"
  18.             />
  19.             <TextareaItem
  20.               title="受控组件"
  21.               value=""
  22.               placeholder="如果你有什么建议意见，欢迎你来吐槽"
  23.               clear
  24.             />
  25.             <TextareaItem
  26.               {...getFieldProps('note1', {
  27.                 initialValue: '',
  28.               })}
  29.               rows={3}
  30.               placeholder="固定行数,rows"
  31.               clear
  32.               onBlur={() => { console.log('onBlur'); }}
  33.               onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  34.             />
  35.             <TextareaItem
  36.               {...getFieldProps('note2', {
  37.                 initialValue: '',
  38.               })}
  39.               title="带标题"
  40.               placeholder="title"
  41.               clear={false}
  42.               onBlur={() => { console.log('onBlur'); }}
  43.               onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  44.             />
  45.             <TextareaItem
  46.               {...getFieldProps('note3', {
  47.                 initialValue: '',
  48.               })}
  49.               title="自适应"
  50.               autoHeight
  51.               clear
  52.               placeholder="autoHeight"
  53.             />
  54.             <TextareaItem
  55.               {...getFieldProps('note4', {
  56.                 initialValue: '',
  57.               })}
  58.               title="最大长度"
  59.               count={30}
  60.               clear
  61.               placeholder="count"
  62.             />
  63.             <TextareaItem
  64.               {...getFieldProps('note5', {
  65.                 initialValue: '',
  66.               })}
  67.               title={<img src="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png" style={{ width: '0.56rem', height: '0.56rem' }} />}
  68.               clear
  69.               placeholder="title类型可以是node"
  70.             />
  71.             <TextareaItem
  72.               {...getFieldProps('note6', {
  73.                 initialValue: '不可编辑',
  74.               })}
  75.               title="不可编辑"
  76.               placeholder="editable"
  77.               editable={false}
  78.             />
  79.             <TextareaItem
  80.               value="禁用状态"
  81.               title="禁用状态"
  82.               disabled
  83.               placeholder="editable"
  84.               editable={false}
  85.             />
  86.             <TextareaItem
  87.               {...getFieldProps('note7', {
  88.                 initialValue: '多行输入,带计数功能,count+rows',
  89.               })}
  90.               title="备注说明"
  91.               rows={5}
  92.               placeholder="计数功能"
  93.               clear
  94.               count={100}
  95.               onBlur={() => { console.log('onBlur'); }}
  96.               onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  97.             />
  98.             <TextareaItem
  99.               {...getFieldProps('note8', {
  100.                 initialValue: '多行输入,带计数功能,count+rows',
  101.               })}
  102.               title="报错样式"
  103.               rows={5}
  104.               placeholder="计数功能"
  105.               clear
  106.               error
  107.               onErrorClick={() => { alert('点击报错'); }}
  108.               count={100}
  109.               onBlur={() => { console.log('onBlur'); }}
  110.               onFocus={(value) => { console.log('onFocus'); console.log(value); }}
  111.             />
  112.           </List.Body>
  113.         </List>
  114.       </div>
  115.     );
  116.   },
  117. });
  119. TextareaItemExample = createForm()(TextareaItemExample);
  121. ReactDOM.render(<TextareaItemExample />, mountNode);

TextareaItem多行输入 - 图1

API

成员说明类型可选值默认值
prefixListClsStringam-list
title文案说明String/node''
nametextarea的nameString''
valuevalue值String是否设置value,决定了该InputItem是否是受控组件,详情请参考https://facebook.github.io/react/docs/forms.html无
defaultValue设置初始默认值String''
placeholderplaceholderString''
editable是否可编辑booltrue
disabled是否禁用boolfalse
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
labelNumber标签字数（一个表单页面中,通常有多个InputItem或者TextareaItem,需要统一标签字数以便统一宽度,保持页面整洁、美观）number2, 3, 4, 5, 6, 74