Input 输入框
代替 HTML 原生控件，input、textarea。
获取组件
import { Input, InputGroup, MaskedInput } from 'rsuite';<Input>输入框组件。<InputGroup>输入框组合组件。<InputGroup.Button>与按钮组合。<InputGroup.Addon>自定义附加元素。<MaskedInput>带掩码的输入框组件。
演示
默认
尺寸
如果你想使用原生 DOM 的 size 属性，你可以使用 htmlSize 属性。
为了使其按预期工作，您还需要提供 style={{ width: 'auto' }} 属性。
<Input htmlSize={10} style={{ width: 'auto' }} />Textarea
禁用与只读
输入框组合
Inside
与按钮组合
密码框
帮助提示
带掩码的输入框组件
MaskedInput 是一个输入掩码组件。 它可以为电话、日期、货币、邮政编码、百分比、电子邮件和几乎任何东西创建输入掩码。
Props
<Input>
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| classPrefix | string ('input') |
组件 CSS 类的前缀 |
| defaultValue | string | 默认值（非受控） |
| disabled | boolean | 禁用 |
| htmlSize | number | 设置原生 input 的 size 属性 |
| onChange | (value: string, event) => void | value 发生变化的回调函数 |
| size | 'lg' | 'md' | 'sm' | 'xs' ('md') |
设置输入框尺寸 |
| type | string ('text' ) |
HTML input type. |
| value | string | 当前值（受控） |
<InputGroup>
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| classPrefix | string ('input-group') |
组件 CSS 类的前缀 |
| inside | boolean | 组合内容在内部 |
| size | 'lg' | 'md' | 'sm' | 'xs' ('md') |
设置输入框组尺寸 |
<MaskedInput>
MaskedInput 继承了 Input 的所有属性，但是没有 type 属性。
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| guide | boolean | 在引导模式或无引导模式 |
| keepCharPositions | boolean (false) |
当为 true 时，添加或删除字符不会影响现有字符的位置 |
| mask (*) | array | function | 用于定义如何阻止用户输入。 |
| placeholderChar | string ('_') |
占位符代表遮罩中的可填充点 |
| showMask | boolean | 在输入值为空时将掩码显示为占位符而不是常规占位符 |