# Input

input框组件

- 使用方式跟原生一致, 支持disabled。
- 通过type设置input的类型, 可选text,checkbox,radio。
- 当类型为text时, 可通过defaultValue设置默认值; 可通过value和onChange事件配合使用手动设置输入值。
- 当类型为checkbox&radio时, 可通过label设置展示的文字。
- 当类型为checkbox&radio时, 可通过defaultChecked设置默认值; 可通过checked和onChange事件配合使用手动设置输入值。

主要属性和接口：

- type:input类型, 默认text
  如：`<Input type="checkbox" />`
- defaultValue:默认值(text)
  如：`<Input type="text" defaultValue="测试" />`
- value&onChange:(text)
  如：`<Input type="text" value={this.state.value} onChange={()=>{this.setState({value:"测试"})}} />`
- label:展示的文字信息(checkbox&radio), 默认空
  如：`<Input type="checkbox" label="测试" />`
- defaultChecked:默认值(checkbox&radio)
  如：`<Input type="checkbox" defaultChecked={true} />`
- checked&onChange:(checkbox&radio)
  如：`<Input type="checkbox" checked={this.state.checked} onChange={()=>{this.setState({checked:false})}} />`

### 方法

### 属性

- classPrefix
- componentTag
- label
- type

### 事件

- onChange

Extends Component
Defined in: `src/Input.js:6`
Module: 表单组件

Available since 0.1.0

## Constructor

### Input

`Input ()`

Defined in `src/Input.js:6`

Available since 0.1.0

#### Example:

    import React, { Component } from "react";
    import {Input} from "phoenix-ui";
    import Code from "./code/code";

    export default class input extends Component{

        constructor(props,context){

            super(props,context);

            this.state = {
                name: "value和onChange配合使用",
                checkboxChecked: true,
                radioChecked: true
            };
        }

        setValue(key,e){
            let o ={};
            o[key || e.target.name] = e.target.value;
            this.setState(o);
        }

        onCheckboxChange(){
            this.setState({
                checkboxChecked: !this.state.checkboxChecked
            });
        }

        onRadioChange(){
            this.setState({
                radioChecked: !this.state.radioChecked
            });
        }

        render(){
            return(
                <div>
                    <h2 className="comp-title">Input</h2>
                    <h3 className="comp-type">type(默认text) 类型</h3>
                    <h3 className="comp-type">text 文本框</h3>
                    <div className="content">
                        <Input placeholder="默认text" />
                        <Input type="text" defaultValue="默认值defaultValue" placeholder="请输入" />
                        <Input type="text" value={this.state.name} onChange={::this.setValue.bind(this,"name")} placeholder="请输入" />
                    </div>
                    <Code target="input-text" />

                    <h3 className="comp-type">checkbox 多选框</h3>
                    <div className="content">
                        <h3 className="comp-tip">默认</h3>
                        <Input type="checkbox" label="苹果" />
                        <h3 className="comp-tip">defaultChecked 初始传值</h3>
                        <Input type="checkbox" label="香蕉" defaultChecked={true} />
                        <h3 className="comp-tip">checked和onChange配合使用</h3>
                        <Input type="checkbox" label="西瓜" checked={this.state.checkboxChecked} onChange={::this.onCheckboxChange} />
                        <h3 className="comp-tip">disabled</h3>
                        <Input type="checkbox" label="西瓜" disabled/>
                    </div>
                    <Code target="input-checkbox" />

                    <h3 className="comp-type">radio 单选框</h3>
                    <div className="content">
                        <h3 className="comp-tip">默认</h3>
                        <Input type="radio" label="男" name="sex1" />
                        <Input type="radio" label="女" name="sex1" />
                        <h3 className="comp-tip">defaultChecked 初始传值</h3>
                        <Input type="radio" label="男" name="sex2" defaultChecked={true}/>
                        <Input type="radio" label="女" name="sex2"/>
                        <h3 className="comp-tip">checked和onChange配合使用</h3>
                        <Input type="radio" label="男" name="sex3" checked={this.state.radioChecked} onChange={::this.onRadioChange}/>
                        <Input type="radio" label="女" name="sex3" checked={!this.state.radioChecked} onChange={::this.onRadioChange}/>
                        <h3 className="comp-tip">disabled</h3>
                        <Input type="radio" label="男" name="sex4" disabled />
                        <Input type="radio" label="女" name="sex4" disabled />
                    </div>
                    <Code target="input-radio" />
                </div>
            );
        }
    }

## 属性

### `classPrefix`

String

Defined in `src/Input.js:54`

样式前缀

Default:

`'input'`

### `componentTag`

String

Defined in `src/Input.js:61`

标签tagName

### `label`

String

Defined in `src/Input.js:47`

类型为checkbox&radio时, 展示的文字信息

Default:

`''`

### `type`

String

Defined in `src/Input.js:40`

input类型, 可选[text,checkbox,radio], 默认text

Default:

`'text'`

## 事件

### `onChange`

Function

Defined in `src/Input.js:67`

更改值时触发的回调