输入框组件

  • 使用方式跟原生一致, 支持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();
Extends Component
Defined in: src/input/index.js:12
Module: 表单组件

Available since 0.1.0

Constructor

Input

Input ()

Defined in src/input/index.js:12

Available since 0.1.0

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的类型