nuke-text-input

0.0.3 • Public • Published

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'
        }}
/>

/nuke-text-input/

    Package Sidebar

    Install

    npm i nuke-text-input

    Weekly Downloads

    0

    Version

    0.0.3

    License

    none

    Last publish

    Collaborators

    • leanhunter