# Input

基础表单，用于输入文本、数字等

提供的输入框有

* Input 基本输入框
* TextArea 可调整大小输入框
* Password 可进行密码显隐输入框
* Group 输入框组合

## 案例演示

### Input 基本用法

---demo
```js
import { Input, StdForm } from 'amos-framework';

const Password = Input.Password;

class Demo extends Component {
  state = {
    pwd: '123456'
  };
  render() {
    const sfProps = {
      fullness: true,
      labelStyle: {
        width: 120
      }
    };

    return (
      <div style={{ width: '25em' }}>
        <StdForm {...sfProps} label="密  码"><Input placeholder="请输入" size="sm" type="password" /></StdForm>
        <StdForm {...sfProps} label="默认密码">
          <Input placeholder="请输入" value={this.state.pwd} size="sm" type="password" onChange={(e) => this.setState({ pwd: e.target.value })} />
        </StdForm>
        <StdForm {...sfProps} label="小尺寸"><Input placeholder="请输入" size="sm" /></StdForm>
        <StdForm {...sfProps} label="正  常"><Input placeholder="请输入" /></StdForm>
        <StdForm {...sfProps} label="大尺寸"><Input placeholder="请输入" size="lg" /></StdForm>
        <StdForm {...sfProps} label="不可用"><Input placeholder="请输入" disabled /></StdForm>
        <StdForm {...sfProps} label="InputPassword"><Password /></StdForm>
        <StdForm {...sfProps} label="InputPassword"><Password size="lg" /></StdForm>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### Input TextArea 使用

---demo
```js
import { Input } from 'amos-framework';

const TextArea = Input.TextArea;

ReactDOM.render((
  <div>
    <TextArea rows={4} defaultValue="可以自由缩放" />
    <TextArea rows={4} autosize defaultValue="自动调整大小" />
    <TextArea rows={4} defaultValue="禁止缩放" disableResize/>
  </div>
), _react_runner_);
```
---demoend

### Input Group使用

---demo
```js
import { Input } from 'amos-framework';

const Group = Input.Group;

ReactDOM.render((
  <div style={{ width: '40em' }}>
    <Group>
      <Input placeholder="上" size="sm" style={{ width: '20%' }} />
      <Input placeholder="下" size="sm" style={{ width: '20%' }} />
      <Input placeholder="左" size="sm" style={{ width: '20%' }} />
      <Input placeholder="右" size="sm" style={{ width: '20%' }} />
    </Group>
    <br />
    <Group>
      <Input defaultValue="029" style={{ width: '20%' }} />
      <Input defaultValue="88886666" style={{ width: '50%' }} />
    </Group>
    <br />
    <Group tight>
      <Input defaultValue="029" style={{ width: '20%' }} />
      <Input defaultValue="88886666" style={{ width: '50%' }} />
    </Group>
  </div>
), _react_runner_);
```
---demoend

### Input 自动 focus

通过添加 `autoFocus` 来实现自动选中。注意：如果一个页面多个 Input，则只会自动 focus 最后一个 Input。

---demo
```js
import { Input, StdForm } from 'amos-framework';

class Demo extends Component {
  render() {
    return (
      <Input autoFocus placeholder="请输入" size="sm" defaultValue="很长很长很长..." />
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend


### Input 自动选中内容

autoSelect 和 autoFocus 最好同时使用。autoSelect 只在初始创建时起效。

---demo
```js
import { Input, StdForm } from 'amos-framework';

class Demo extends Component {
  render() {
    return (
      <Input autoFocus autoSelect placeholder="请输入" size="sm" defaultValue="很长很长很长..." />
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

### Input Props

| params  | type | default | description |
| --- | --- | --- | --- |
| prefixCls | string | `amos-input` | css class 前缀 |
| className | string | - | css class |
| value | ReactText | - | 输入框的值 |
| defaultValue | ReactText | - | 初始化输入框的值, 不可控 |
| onChange | function | - | 输入改变后的回调，参数为 event 对象 |
| size | string: `sm、lg` | - | 输入框大小，除默认外可选值：sm、lg |
| disabled | boolean | - | 是否禁用 |
| placeholder | string | - | 同 input placeholder |
| onPressEnter | function | - | 按下回车的回调，参数为 event 对象 |
| onKeyDown | function | - | 按键回调，参数为 event 对象 |
| autoSelect | Boolean | - | 自动选中输入框文本，autoSelect 只在初始创建时起效。autoSelect 和 autoFocus 最好同时使用。 |

Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/events.html#supported-events) 一致。

如：

* autoFocus： 自动聚焦
* readOnly： 只读

> methods

  focus()
  select()

### TextArea

| params  | type | default | description |
| --- | --- | --- | --- |
| style | object | - | style 样式 |
| prefixCls | string | `amos-input` | css class 前缀 |
| className | string | - | css class |
| value | ReactText | - | 输入框的值 |
| defaultValue | ReactText | - | 初始化输入框的值, 不可控 |
| autosize | boolean | - | 自动调整大小 |
| disableResize | boolean | - | 禁用大小调整 |
| onChange | function | - | 输入改变后的回调，参数为 event 对象 |
| onPressEnter | function | - | 按下回车的回调，参数为 event 对象 |
| onKeyDown | function | - | 按键回调，参数为 event 对象 |
| cols | Number | 20 | 文本域的可视宽度。必须为正数，默认为20 (HTML5)。 |
| rows | Number | - | 元素的输入文本的行数（显示的高度）。 |

`Input.TextArea` 其它属性同 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。

> 注意，在控制 `Input.TextArea` 宽和高时，如果是具体值，尽量不要采用 rows 和 cols 来进行控制，建议采用采用 `width、height`。

### Group

| params  | type | default | description |
| --- | --- | --- | --- |
| style | object | - | style 样式 |
| prefixCls | string | `amos-input-group` | css class 前缀 |
| className | string | - | css class |
| size | string | - | 大小，除了默认值，可选值有 `lg、sm` |
| tight | boolean | - | 是否采用紧促的 |