Nuke-normal-input NPM

NormalInput

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

API

属性配置	说明	类型	默认值
type	键盘类型，可选 `text` `url` `password` `tel` `date` `time` `email` `number`	string	`text`
inputStyle	input 标签的样式	object
clearIconStyle	clear icon 的样式	object
autoFocus	自动获得焦点	boolean	false
multiple	是否为多行，不选则为单行	bool	false
value	当前的 value 值	string
maxLength	最长字数	number
defaultValue	初始化的 value 值(非受控用法)	string
disabled	状态设置文本域禁用状态	boolean	false
onInput	输入事件	`function(e)`	false
onFocus	Focus 事件	`function`	false
onBlur	Blur 事件	`function`	false
onChange	change	`function(value, e)`
onReturn	仅 native 有效，return 事件，用户在手机上点击了 return 键触发（键盘右下角），返回值 e {returnKeyType:'类型',value:'输入框的值'}	`function(e)`	false
returnKeyType	仅 native 有效，return 键展示类型（键盘右下角的那个键），可选 `default` `go` `next` `search` `send` `done`	string	`default`
focus 实例方法	让 input 获得焦点	`function`
blur 实例方法	让 input 失去焦点	`function`
getValue 实例方法	获取输入框的值	`function`
rows	多行 input 中可同时显示的行数	number	2
placeholder	placeholder 文本	string	无
placeholderColor	placeholder 颜色，仅 native 有效	string	'#999999'
status	状态，可枚举"success","error",如果是 error，会有 error 样式	string	success
errorMessage	错误信息，配合 status error 使用	string	无
renderCount	是否显示字数统计，如果开启，必须要设置 maxLength	boolean	false
hasClear	是否渲染清除按钮	boolean	false
onClear	清除按钮点击事件	`function`
fixedFont	字体大小是否随屏幕缩放	boolean	false
hideErrorWhenFocus	是否在 focus 状态隐藏错误。	boolean	true

关于 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);
  }}
/>

实例方法

focus 和 blur

  //在某些情况下需要让 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'}
/>