TextareaItem 多行输入

用于接受多行文本。

规则

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

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

代码演示

基本

受控组件建议使用(rc-form ) 

  1. import { List, TextareaItem } from 'antd-mobile';
  2. import { createForm } from 'rc-form';
  4. class TextareaItemExample extends React.Component {
  5.   state = {
  6.     focused: false,
  7.   };
  8.   render() {
  9.     const { getFieldProps } = this.props.form;
  10.     return (
  11.       <div>
  12.         <List renderHeader={() => 'Customize to focus'}>
  13.           <TextareaItem
  14.             title="标题"
  15.             placeholder="auto focus in Alipay client"
  16.             data-seed="logId"
  17.             autoFocus
  18.             autoHeight
  19.           />
  20.           <TextareaItem
  21.             title="标题"
  22.             placeholder="click the button below to focus"
  23.             data-seed="logId"
  24.             autoHeight
  25.             focused={this.state.focused}
  26.             onFocus={() => {
  27.               this.setState({
  28.                 focused: false,
  29.               });
  30.             }}
  31.           />
  32.           <List.Item>
  33.             <div
  34.               style={{ width: '100%', color: '#108ee9', textAlign: 'center' }}
  35.               onClick={() => {
  36.                 this.setState({
  37.                   focused: true,
  38.                 });
  39.               }}
  40.             >
  41.               click to focus
  42.             </div>
  43.           </List.Item>
  44.         </List>
  45.         <List renderHeader={() => 'Whether is controlled'}>
  46.           <TextareaItem
  47.             {...getFieldProps('control')}
  48.             title="受控组件"
  49.             placeholder="Hello World"
  50.           />
  51.           <TextareaItem
  52.             title="非受控组件"
  53.             placeholder="please input content"
  54.           />
  55.         </List>
  56.         <List renderHeader={() => 'Auto / Fixed height'}>
  57.           <TextareaItem
  58.             {...getFieldProps('note3')}
  59.             title="高度自适应"
  60.             autoHeight
  61.             labelNumber={5}
  62.           />
  63.           <TextareaItem
  64.             {...getFieldProps('note1')}
  65.             rows={3}
  66.             placeholder="fixed number of lines"
  67.           />
  68.         </List>
  69.         <List renderHeader={() => 'Show clear icon'}>
  70.           <TextareaItem
  71.             {...getFieldProps('clear1')}
  72.             clear
  73.             title="标题"
  74.             placeholder="displayed clear icon while typing"
  75.           />
  76.         </List>
  77.         <List renderHeader={() => 'Custom title（text / image / empty）'}>
  78.           <TextareaItem
  79.             {...getFieldProps('title3')}
  80.             title={<img src="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png" alt="icon" style={{ width: '0.56rem', height: '0.56rem' }} />}
  81.             placeholder="title can be customized"
  82.           />
  83.         </List>
  84.         <List renderHeader={() => 'Limited value length'}>
  85.           <TextareaItem
  86.             {...getFieldProps('note4')}
  87.             placeholder="can enter up to 10 characters"
  88.             count={10}
  89.           />
  90.         </List>
  91.         <List renderHeader={() => 'Count'}>
  92.           <TextareaItem
  93.             {...getFieldProps('count', {
  94.               initialValue: '计数功能,我的意见是...',
  95.             })}
  96.             rows={5}
  97.             count={100}
  98.           />
  99.         </List>
  100.         <List renderHeader={() => 'Not editable / Disabled'}>
  101.           <TextareaItem
  102.             {...getFieldProps('note6', {
  103.               initialValue: 'not editable',
  104.             })}
  105.             title="姓名"
  106.             editable={false}
  107.           />
  108.           <TextareaItem
  109.             value="disabled style"
  110.             title="姓名"
  111.             disabled
  112.           />
  113.         </List>
  114.       </div>
  115.     );
  116.   }
  117. }
  119. const TextareaItemExampleWrapper = createForm()(TextareaItemExample);
  121. ReactDOM.render(<TextareaItemExampleWrapper />, mountNode);
  1. .demoTitle:before,
  2. .demoTitle:after {
  3.   border-bottom: none;
  4. }

TextareaItem多行输入 - 图1

API

适用平台：WEB、React-Native
属性说明类型默认值
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之间的数字，一般(不能保证全部)能对应显示出相应个数的中文文字(不考虑英文字符)number5
name (Web Only)textarea 的 nameString-
prefixListCls (Web Only)列表 className 前缀Stringam-list
autoFocus (Web Only)页面初始化时Textarea自动获取光标,每个页面只有一个Textarea的autpFocus会生效。（不保证所有浏览器都生效）boolfalse
focused (Web Only)页面运行过程中,Textarea获取光标,当Textarea获取光标（focused更新为true）后，需要在onFocus或者onBlur时再次将该属性设置为false。boolfalse
title (Web Only)文案说明String/node''

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