0.0.3 • Published 7 years ago
nuke-text-input v0.0.3
TextInput
- category: Components
- chinese: 输入框
- type: 基本
何时使用
TextInput 是唤起用户输入的基础组件。 当定义 multiline 输入多行文字时其功能相当于 textarea。
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| multiline【与multiple 重复，即将废弃】 | 定义该属性文本框可以输入多行文字 | boolean | false |
| multiple | 定义该属性文本框可以输入多行文字 | boolean | false |
| accessibilityLabel | 为元素添加标识 | string | 无 |
| autoComplete | 添加开启自动完成功能 | boolean | false//todo |
| autoFocus | 添加开启获取焦点 | boolean | false |
| editable | 文本框是否可编辑 | boolean | true |
| keyboardType【 与type 重复，即将废弃】 | 设置弹出哪种软键盘 可用的值有default ascii-capable numbers-and-punctuation url number-pad phone-pad name-phone-pad email-address decimal-pad twitter web-search numeric | string | default |
| type | 设置弹出哪种软键盘 可用的值有text number url password tel date time email | string | text |
| maxLength | 设置最大可输入值 | number | 无 |
| maxNumberOfLines | 当文本框为mutiline时设置最多的行数 | number | 无 |
| numberOfLines | 同上设置行数 | number | 无 |
| placeholder | 设置文本框提示 | string | 无 |
| password【与type 重复，即将废弃】 | 文本框内容密码显示 | ||
| secureTextEntry【与type 重复，即将废弃】 | 同上文本框内容密码显示 | ||
| value | 文本框的文字内容 | string | 无 |
| style | 自定义样式 | Object | 无 |
同时 TextInput 响应下面几个事件：
- onBlur: 文本框失焦时调用此函数。
onBlur={() => console.log('失焦啦')} - onFocus: 文本框获得焦点时调用此函数
- onChange: 文本框内容变化时调用此函数
- onInput: 文本框输入内容时调用此函数
使用示例：
<TextInput
placeholder="Enter text to see events"
autoFocus multiline
onFocus={() => console.log('onFocus')}
onBlur={() => console.log('onBlur')}
onInput={() => console.log('onInput')}
style={{
width: '1000rem',
height: '1000rem',
borderWidth:'1rem',
borderStyle:'solid',
borderColor:'#cccccc'
}}
/>