Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

nuke-input

Package Overview
Dependencies
8
Maintainers
4
Versions
185
Issues
File Explorer

Advanced tools

nuke-input

输入框

    2.3.12latest

Version published
Maintainers
4
Yearly downloads
5,064
decreased by-41.79%

Weekly downloads

Readme

Source

Input

  • category: UI
  • chinese: 输入框
  • type: UI 组件

设计思路

Input 是页面输入框的封装,其中 multiple = true 时为多行文本,类似 web 端的 textarea 组件。

Input type 不同,在端内有不同类型的键盘表现。

Nuke 的 Input 组件可以通过 materialDesign = true 开启 android material design 模式。

API

属性配置说明类型默认值
type键盘类型,可选 text url password tel date time email numberstringtext
autoFocus自动获得焦点booleanfalse
multiple是否为多行,不选则为单行boolfalse
value当前的 value 值string
maxLength最长字数number
defaultValue初始化的 value 值(非受控用法)string
disabled状态 设置文本域禁用状态booleanfalse
onInput输入事件function(e)false
onFocusFocus 事件functionfalse
onBlurBlur 事件functionfalse
onChangechangefunction(value, e)
onReturn仅 native 有效,return 事件,用户在手机上点击了 return 键触发(键盘右下角),返回值 e {returnKeyType:'类型',value:'输入框的值'}function(e)false
returnKeyType仅 native 有效,return 键展示类型(键盘右下角的那个键),可选 default go next search send donestringdefault
focus 实例方法让 input 获得焦点function
blur 实例方法让 input 失去焦点function
getValue 实例方法获取输入框的值function
rows多行 input 中可同时显示的行数number2
placeholderplaceholder 文本string
placeholderColorplaceholder 颜色,仅 native 有效string'#999999'
status状态,可枚举"success","error",如果是 error,会有 error 样式stringsuccess
errorMessage错误信息,配合 status error 使用string
renderCount是否显示字数统计,如果开启,必须要设置 maxLengthbooleanfalse
hasClear是否渲染清除按钮booleanfalse
onClear清除按钮点击事件function
fixedFont字体大小是否随屏幕缩放booleanfalse
materialDesign是否开启 md 模式booleanfalse
floatPlaceholder仅 md 模式下有效,placeholder 是否固定。若不固定,输入时将自动上浮(md 交互效果)。如果固定 placeholder 不动,顶部预留的间隙将被移除。默认自动上浮。booleantrue
hideErrorWhenFocus是否在 focus 状态隐藏错误。booleantrue

关于 defaultValue 与 value (非受控与受控的差别)

  • defaultValue : 传入 value 默认值,用于 constructor 中计算使用,生命周期函数改变也不会再改变。
<Input defaultValue="羊绒大衣" onChange={(value, e) => { console.log(value); }} />
  • value: 受控用法,会随着生命周期函数改变而改变。
<Input value={this.state.value} onChange={(value, e) => { console.log(value); }} />

实例方法

  • focusblur
//在某些情况下需要让 myinput 强制失去焦点 focus = (e) => { this.input.wrappedInstance.focus(); } blur = (e) => { this.input.wrappedInstance.blur(); } change = (value,e) => { console.log(value);//强制失去焦点后,会触发 onCchange } render(){ return ( <View> <Input ref={(n)=>{this.input = n;}} onChange={this.change}/> <Button type="primary" onPress={this.focus}>点我让input获得焦点</Button> <Button type="primary" onPress={this.blur}>失去焦点,获取输入内容</Button> </View> ) }
  • getValue 获取当前输入框值

    //在某些情况下需要让 myinput 强制失去焦点 submitForm = (e) => { let inputValue = this.input.wrappedInstance.getValue(); //xxx } render(){ return ( <View> <Input ref={(n)=>{this.input = n;}} /> <Button type="primary" onPress={this.submitForm}>提交表单</Button> </View> ) }

Demo

  • 非 md 模式
<Input materialDesign={false} hasClear={true} defaultValue={'WATSON$7189833'} onInput={this.checkLength} status={this.state.status1} hasWarningIcon={true} type="text" onChange={this.change} placeholder="Enter Voucher Code" errorMessage={'Voucher code error'} />
  • md 模式
// materialDesign = true 或 外层包裹 Styleprovider 都可以实现开启 md 的目的 <Input materialDesign={true} hasWarningIcon={true} defaultValue={'WATSON$7189833'} status={'error'} type="text" onChange={this.change} placeholder="Enter Voucher Code" errorMessage={'Voucher code error'} />

其他

  • bug、建议联系 @翊晨
  • 钉钉交流群

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc