# zent-input

> Zent Input组件

Latest version **1.1.0** (published 2017-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install zent-input
pnpm add zent-input
yarn add zent-input
bun add zent-input
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-04-24 |
| First published | 2017-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2250 |
| Author | wangwanlu@youzan && jinfeng@youzan.com |
| Maintainers | delai, youzan-lc |

## Links

- npm: https://www.npmjs.com/package/zent-input
- Repository: https://github.com/youzan/zent
- Homepage: https://github.com/youzan/zent#readme
- Issues: https://github.com/youzan/zent/issues
- npm.io page: https://npm.io/package/zent-input

## Dependencies (1)

- [zent-utils](https://npm.io/package/zent-utils.md) 1.1.0

## Recent versions

- 1.1.0 (latest) — 2017-04-24
- 1.1.0-beta4 (beta) — 2017-04-19
- 1.1.0-beta1 — 2017-04-18
- 1.0.13 — 2017-04-13
- 1.0.12 — 2017-04-13
- 1.0.11 — 2017-04-10
- 1.0.10 — 2017-03-31
- 1.0.9 — 2017-03-14
- 1.0.8 — 2017-03-08
- 1.0.8-beta2 — 2017-03-02
- 1.0.8-beta1 — 2017-02-27
- 1.0.7 — 2017-02-22
- 1.0.6 — 2017-02-17
- 1.0.5 — 2017-02-15
- 1.0.4 — 2017-02-15
- … 4 more at https://npm.io/package/zent-input/versions

## README

## Input 输入框

表单的输入组件，对原生input的包装，通过鼠标或键盘输入内容。

### 使用指南

- 在表单输入时使用，可带前缀或后缀。
- 可与其它组件组合使用，如组合成一个搜索输入框

### 代码演示

:::demo 基础用法

```js
import { Input } from 'zent';

ReactDOM.render(
    <div>
        <Input placeholder="Please input your name" autoFocus />
        <Input type="password" placeholder="Please input your password" />
    </div>
    , mountNode
);

```
:::

:::demo 带前后缀的输入框

```js
import { Input } from 'zent';

ReactDOM.render(
    <div>
        <Input addonBefore="$" />
        <Input addonAfter="%" />
        <Input addonBefore="Buy" addonAfter="Apple" />
    </div>
    , mountNode
);
```
:::

:::demo textarea输入框

```js
import { Input } from 'zent';

ReactDOM.render(
    <div>
        <Input type="textarea" />
    </div>
    , mountNode
);
```
:::

:::demo 事件处理

```js
import { Input } from 'zent';

class EventTest extends React.Component {
    constructor() {
        super();
        this.state = {
            logs: []
        }
    }
    onPressEnter = (e) => {
        this.addLog('enter pressed');
    }

    onKeyDown = (e) => {
        this.addLog('key down');
    }

    addLog(msg) {
        const { logs } = this.state;
        logs.push(msg)
        this.setState({logs})
    }

    render() {
        return (
            <div>
                <Input onPressEnter={this.onPressEnter} placeholder="press enter"/>
                <Input onKeyDown={this.onKeyDown} placeholder="key down"/>
                <div>{this.state.logs.map((log, index) => <p key={index}>{log}</p>)}</div>
            </div>
        );
    }
}

ReactDOM.render(
    <EventTest />
    , mountNode
);
```
:::


### API

| 参数           | 说明              | 类型            | 默认值      | 备选值                     | 是否必填 |
| ------------ | --------------- | ------------- | -------- | ----------------------- | ---- |
| className    | 自定义额外类名         | string        | `''`     |                         | 否    |
| prefix       | 自定义类前缀          | string        | `'zent'` |                         | 否    |
| type         | 自定义类前缀          | string        | `'text'` | `'number'`、`'password'`、`'textarea'` | 否    |
| defaultValue | 默认值             | string        |          |                         | 否    |
| value        | 输入值             | string        |          |                         | 否    |
| readOnly     | 是否只读            | bool          | `false`  |                         | 否    |
| disabled     | 是否禁用            | bool          | `false`  |                         | 否    |
| placeholder  | 原生placeholder文案 | string        | `''`     |                         | 否    |
| addonBefore  | 前置标签            | node          |          |                         | 否    |
| addonAfter   | 后置标签            | node          |          |                         | 否    |
| autoFocus    | 自动focus          | bool          |          |                         | 否    |
| onChange     | change事件        | func(e:Event) |          |                         | 否    |
| onPressEnter | 回车事件            | func(e:Event) |          |                         | 否    |

_除了以上属性外，所有react支持的input属性，Input组件都支持_

#### focus

`focus(): function`

手动聚焦到输入框

<style>
.zent-input-wrapper {
    width: 200px;
    margin-bottom: 20px;
}
</style>

---
_Source: https://npm.io/package/zent-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._