# Input

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

---

## 设计思路

Input 是页面输入框的封装，其中 multiple = true 时为多行文本，类似 web 端的 textarea 组件。

Input type 不同，在端内有不同类型的键盘表现。

Nuke 的 Input 组件可以通过 materialDesign = true 开启 android material design 模式。

## API

| 属性配置           | 说明                                                                                                                                                 | 类型                 | 默认值    |
| :----------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------- | :-------- |
| type               | 键盘类型，可选 `text` `url` `password` `tel` `date` `time` `email` `number`                                                                          | string               | `text`    |
| 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     |
| materialDesign     | 是否开启 md 模式                                                                                                                                     | boolean              | false     |
| floatPlaceholder   | 仅 md 模式下有效，placeholder 是否固定。若不固定，输入时将自动上浮（md 交互效果）。如果固定 placeholder 不动，顶部预留的间隙将被移除。默认自动上浮。 | boolean              | true      |
| hideErrorWhenFocus | 是否在 focus 状态隐藏错误。                                                                                                                          | boolean              | true      |

### 关于 defaultValue 与 value (非受控与受控的差别)

* defaultValue : 传入 value 默认值，用于 constructor 中计算使用，生命周期函数改变也不会再改变。

```js
<Input
  defaultValue="羊绒大衣"
  onChange={(value, e) => {
    console.log(value);
  }}
/>
```

* value: 受控用法，会随着生命周期函数改变而改变。

```js
<Input
  value={this.state.value}
  onChange={(value, e) => {
    console.log(value);
  }}
/>
```

### 实例方法

* `focus` 和 `blur`


```js
  //在某些情况下需要让 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` 获取当前输入框值

  ```js
    //在某些情况下需要让 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 模式

<img src="https://img.alicdn.com/tfs/TB1peIqe5qAXuNjy1XdXXaYcVXa-610-164.jpg" width="300" />

```js
<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 模式

<img src="https://img.alicdn.com/tfs/TB1oKIqe5qAXuNjy1XdXXaYcVXa-622-148.jpg" width="300" />

```js
// 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'}
/>
```

## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />