• Input 输入框

    通过鼠标或键盘输入内容,是最基础的表单域的包装。

    何时使用

    代码演示

    基本使用。

    用于配置一些固定组合。

    带有搜索按钮的输入框。

    autosize 属性适用于 textarea 节点,并且只有高度会自动变化。另外 autosize 可以设定为一个对象,指定最小行数和最大行数。

    在输入框上添加前缀或后缀图标。

    我们为 <Input /> 输入框定义了三种尺寸(大、默认、小),高度分别为 40px32px24px

    注意: 在表单里面,我们只使用大尺寸的输入框。

    输入框的组合展现。

    注意:使用 compact 模式时,不需要通过 Col 来控制宽度。

    用于多行输入。

    结合 Tooltip 组件,实现一个数值输入框,方便内容超长时的全量展现。

    API

    Input

    参数 说明 类型 默认值
    addonAfter 带标签的 input,设置后置标签 string|ReactNode
    addonBefore 带标签的 input,设置前置标签 string|ReactNode
    defaultValue 输入框默认内容 string
    disabled 是否禁用状态,默认为 false boolean false
    id 输入框的 id string
    prefix 带有前缀图标的 input string|ReactNode
    size 控件大小。注:标准表单内的输入框大小限制为 large。可选 large default small string default
    suffix 带有后缀图标的 input string|ReactNode
    type 声明 input 类型,同原生 input 标签的 type 属性,见:MDN(请直接使用 Input.TextArea 代替 type="textarea")。 string text
    value 输入框内容 string
    onPressEnter 按下回车的回调 function(e)
    copy 显示复制按钮 boolean false
    onCopy 点击复制按钮的回调 function(copyValue)
    underline input 下划线 boolean true

    如果 InputForm.Item 内,并且 Form.Item 设置了 idoptions 属性,则 value defaultValueid 属性会被自动设置。

    Input 的其他属性和 React 自带的 input 一致。

    Input.TextArea

    2.12 后新增的组件,旧版请使用 Input[type=textarea]

    参数 说明 类型 默认值
    autosize 自适应内容高度,可设置为 `true false或对象:{ minRows: 2, maxRows: 6 }` boolean|object
    defaultValue 输入框默认内容 string
    value 输入框内容 string
    onPressEnter 按下回车的回调 function(e)

    Input.TextArea 的其他属性和浏览器自带的 textarea 一致。

    参数 说明 类型 默认值
    enterButton 是否有确认按钮,可设为按钮文字 boolean|ReactNode false
    onSearch 点击搜索或按下回车键时的回调 function(value)

    其余属性和 Input 一致。

    Input.Group

    参数 说明 类型 默认值
    compact 是否用紧凑模式 boolean false
    size Input.Group 中所有的 Input 的大小,可选 large default small string default
    <Input.Group>
      <Input />
      <Input />
    </Input.Group>