Input
输入框组件
- 使用方式跟原生一致, 支持disabled、maxLength等原生属性。
- 通过type设置input的类型, 可选text,search,password。
- 可通过value设置默认值。
- 可通过设置clear属性是否显示清除按钮,默认不显示。
- 可通过设置visible属性判断password类型是否显示可见密码的按钮,默认不显示。
- 可通过设置error设置当前输入错误。
- 可通过getValueCallback获取当前元素的value值,仅适用于text、search。
- 可通过设置phReg设置正则表达式,失焦时如果不符合正则显示错误样式。
- className/style属性加在外层,其余属性均赋予input元素。
主要属性和接口:
- type:input类型, 默认text
如:<Input type='search' disabled/>
- value:设置默认值
如:<Input value='测试' />
- clear:是否显示清除按钮
如:<Input value='测试' clear/>
- visible: 是否显示可见密码的按钮(仅适用于password类型)
如:<Input type='password' value='123456' visible />
- error: 当前输入错误
如:<Input type='password' value='123456' error />
- phReg: 正则表达式
如:<Input type="text" placeholder="6-18位不以数字开头的用户名" phReg={/^[a-zA-Z$_]\w{5,17}$/} />
- getValueCallback: 获取当前input的value。
如:<Input ref={(inputElem)=>{this.inputElem=inputElem}} />
this.inputElem.getValueCallback();
Constructor
Input
Input
()
Example:
import React, { Component } from "react"
import Input from "phoenix-ui/lib/input"
import Button from "phoenix-ui/lib/button"
import Code from "./code/code"
export default class input extends Component{
constructor(props,context){
super(props,context);
this.state = {
name: "value和onChange配合使用",
value: ""
};
}
setValue(key,e){
let o ={};
o[key || e.target.name] = e.target.value;
this.setState(o);
}
getValue(){
this.setState({
value: this.inputElem.getValueCallback()
});
}
clickHandle(){
this.setState({
value: 0
})
}
render(){
return(
<div>
<h2 className="comp-title">Input</h2>
<h3 className="comp-type">type(text/search/password)</h3>
<div className="content">
<h3 className="comp-tip">text</h3>
<Input placeholder="请输入" value={this.state.value}/>
<Input placeholder="请输入" value="默认值" clear />
<Input placeholder="请输入" value="不可编辑的情况" disabled/>
<button onClick={this.clickHandle.bind(this)}>按钮</button>
</div>
<Code target="input-text" />
<div className="content">
<h3 className="comp-tip">search</h3>
<Input type="search" placeholder="请输入" />
<Input type="search" placeholder="请输入" value="可清空输入的文字" clear />
<Input type="search" placeholder="请输入" value="不可编辑的情况" disabled />
</div>
<Code target="input-search" />
<div className="content">
<h3 className="comp-tip">password</h3>
<Input type="password" placeholder="请输入" />
<Input type="password" value="123456" clear />
<Input type="password" value="123456" placeholder="请输入" clear visible />
</div>
<Code target="input-password" />
<h3 className="comp-type">clear 可清除内容</h3>
<div className="content">
<Input type="text" value="123456" clear />
</div>
<Code target="input-clear" />
<h3 className="comp-type">visible 密码可见</h3>
<div className="content">
<Input type="password" value="123456" visible />
</div>
<Code target="input-visible" />
<h3 className="comp-type">error 错误</h3>
<div className="content">
<Input type="text" value="123456" error />
</div>
<Code target="input-error" />
<h3 className="comp-type">phIcon 输入框icon</h3>
<div className="content">
<Input type="text" placeholder="请输入" phIcon="search" />
<Input type="search" placeholder="请输入" phIcon="search" />
<Input type="text" value="123456" placeholder="请输入" phIcon="search" />
<Input type="search" value="123456" placeholder="请输入" phIcon="search" />
</div>
<Code target="input-phicon" />
<h3 className="comp-type">phReg 正则表达式</h3>
<div className="content">
<Input placeholder="6-18位不以数字开头的用户名" phReg={/^[a-zA-Z$_]\w{5,17}$/} />
<Input value="123" placeholder="6-18位不以数字开头的用户名" phReg={/^[a-zA-Z$_]\w{5,17}$/} />
</div>
<Code target="input-phreg" />
<h3 className="comp-type">getValueCallback 获取数值</h3>
<div className="content">
<Input placeholder="默认text" ref={(inputElem)=>{this.inputElem = inputElem}} />
<div><Button onClick={this.getValue.bind(this)}>点击获取值</Button> <span style={{float:'right'}}>{this.state.value}</span></div>
</div>
<Code target="input-getvalue" />
</div>
);
}
}
属性
classPrefix
String
样式前缀
Default:
'input'
clear
Boolean
是否显示[清除已经输入的内容按钮],仅适用于text,search,password的类型
componentTag
String
标签tagName
error
Boolean
是否错误
phIcon
String
icon符号类型
Default:
''
phReg
Object
正则表达式
type
String
input类型, 可选[text,search,password], 默认text
Default:
'text'
visible
Boolean
是否显示[密码是否可见按钮],仅适用于password的类型