---
name: Input 输入框
route: /input
parent: 组件
menu: 数据录入
---
import { Playground, Props } from 'docz'
import  Input,{IntegerValues,PositiveIntegerValues,PositiveIntegerWithLimit,FloatPointValues,TwoDecimalAtMost}  from '../components/input'
import Demo from './components/InputValidator'
window.Input = Input;

# Input 输入框
>提示: 展开代码编辑器可以在线编辑，实时生效

## 基础用法

<Playground>
  <Input placeholder='请输入'/>
  <Input placeholder='请输入' icon="Search" iconPosition="start"/>
  <Input placeholder='请输入' icon="Search" iconPosition="end"/>
</Playground>

## width
<Playground>
  <Input placeholder='请输入' width={100}/>
  <Input placeholder='请输入' width={200}/>
</Playground>

## maxLength
<Playground>
  <Input placeholder='我能输入10下' maxLength={10}/>
  <Input placeholder='我只能输入5下' maxLength={5}/>
</Playground>

## readOnly and disabled
<Playground>
  <Input value='readOnly' readOnly/>
  <Input value='disabled' disabled/>
</Playground>

## onChange


<Playground>
  <Input placeholder='请输入' onChange={e=>console.log(e.target.value)}/>
</Playground>

## clear

<Playground>
  <Input placeholder='请输入' clear/>
</Playground>

## preValidator
输入前验证函数，接收的参数是将要展示在输入框内的字符串，如果返回true，则允许用户输入该字符串，如果返回的是字符串，则阻止用户输入，该字符串作为错误信息展示
一个典型的`preValidator`函数的定义如下：
```typescript jsx
const IntegerValues = (value: string) => /^-?\d*$/.test(value) || '只能输入整数'
```
Input组件内部默认`export`了一些常用的验证函数，使用方法如下
```typescript jsx
import {IntegerValues,PositiveIntegerValues,PositiveIntegerWithLimit,FloatPointValues,TwoDecimalAtMost} from 'kwai-ui/build/input'
```
<Playground>
  <Input width='250px' style={{marginBottom: 25}} placeholder='只能输入整数' clear preValidator={IntegerValues}/>
  <Input width='250px' style={{marginBottom: 25}} placeholder='只能输入正整数' clear preValidator={PositiveIntegerValues}/>
  <Input width='250px' style={{marginBottom: 25}} placeholder='只能输入正整数，且不能大于50' clear preValidator={PositiveIntegerWithLimit(50)}/>
  <Input width='250px' style={{marginBottom: 25}} placeholder='只能输入数字' clear preValidator={FloatPointValues}/>
  <Input width='250px' style={{marginBottom: 25}} placeholder='只能输入数字，小数位数不能大于2' clear preValidator={TwoDecimalAtMost}/>
</Playground>

## validator 

输入长度必须大于4的限制，初始化的时候不检查
通过ref可以获取当前是否通过了validator的验证（非reactive，必须通过方法调用）

<Demo/>


```typescript jsx
import React from 'react';
import Input from 'components/input';
import Button from 'components/button';

export default function() {
    const ref = React.createRef();
    return (
        <div>
            <Input validator={(e: string) => e.length >= 4 || '长度小于4'} ref={ref} />
            <Button onClick={() => alert(`当前状态：${ref.current.isValid ? '正常' : '有错误'}`)} style={{ marginLeft: 20 }}>
                check
            </Button>
        </div>
    );
}

```

## tips
<Playground>
  <Input placeholder='tips example' tips='我是提示信息'/>
</Playground>

## 其他html属性

其他html input元素的属性原生支持，如 type、name、autoFocus，参考文档（注意html原生属性和react支持的camelCase属性名的区别）
- [mdn](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes_common_to_all_input_types)
- [react doc](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes)

<Playground>
  <Input placeholder='password' type='password'/>
</Playground>

## TextArea

<Playground>
    <Input placeholder='请输入' textarea={true} rows={2} width={400} maxLength={20}/>

</Playground>


## API

<Props of={Input} />