---
name: Input 输入框
route: /guide/input
menu: form
---

import JsxParser from "react-jsx-parser";
import {
  MessageBox,
  InlineCode,
  Example,
  Code,
  PropsTable
} from "theme";
import { Input } from "shineDev";
import code from "./demo";
import "./demo/index.scss";

# Input 输入框

## 概述
在页面上生成一个表单容器，用户可以通过鼠标、键盘等设备输入内容，是最基本的表单组件。

## 代码示例

<MessageBox messageType="info">
  为了让用户直观地查看代码演示，我们加入了{" "}
  <InlineCode>shine-input-helper</InlineCode>{" "}
  修饰符，在开发过程中无需配置该字段。
</MessageBox>

#### 基础输入框

输入框组件是由基础输入标签封装而成，可以快速的创建一些常见的表单控件。

<Example
  display={<JsxParser {...code.basic} />}
  code={{code:code.basic.jsx}}
  components={code.basic.components}
/>

#### 尺寸

输入框支持三种尺寸以适应不同的页面需求。

<Example
  display={<JsxParser {...code.size} />}
  code={{code:code.size.jsx}}
  components={code.size.components}
/>

#### 状态

在部分应用场景下，输入框需要展示为禁用和只读状态。

<Example
  display={<JsxParser {...code.state} />}
  code={{code:code.state.jsx}}
  components={code.state.components}
/>

#### 事件

<MessageBox messageType="info">
  打开浏览器控制台，并操作下方输入框，即可查看事件效果。
</MessageBox>

<Example
  display={
      <Input
        placeholder="打开控制台查看效果"
        onChange={e=>{console.log('onChange',e.target.value)}}
        onBlur={e=>{console.log('onBlur',e.target.value)}}
        onClick={e=>{console.log('onClick',e.target.value)}}
      />
  }
  code={{code:code.event.jsx}}
  components={code.event.components}
/>

## 配置参数

<PropsTable of={Input} />

<MessageBox messageType="info">
  完整类型列表请参考 <a href="//developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#%E5%B1%9E%E6%80%A7">MDN</a>。
</MessageBox>