Input 输入框

使用场景

输入框，可以用来输入剪短的文本内容。

示例

基本示例

inline

function Basic() { return ( <Flex spacing="l" direction="column"> <Input onChange={console.log} /> <Input defaultValue="默认值" onChange={console.log} /> <Input defaultValue="只读输入框" onChange={console.log} readOnly /> <Input defaultValue="只读输入框" onChange={console.log} disabled /> </Flex> ); }

function Basic() {
  return (
    <Flex spacing="l" direction="column">
      <Input onChange={console.log} />
      <Input defaultValue="默认值" onChange={console.log} />
      <Input defaultValue="只读输入框" onChange={console.log} readOnly />
      <Input defaultValue="只读输入框" onChange={console.log} disabled />
    </Flex>
  );
}

整行输入框

inline

function Fill() { return <Input fill placeholder="详细配送地址" onChange={console.log} />; }

function Fill() {
  return <Input fill placeholder="详细配送地址" onChange={console.log} />;
}

校验状态

通过 status 传入输入框的校验状态

inline

function Status() { return ( <Flex spacing="l" direction="column"> <Input defaultValue="hippo" status="error" /> <Input defaultValue="hippo" status="success" /> <Input defaultValue="hippo" status="warning" /> </Flex> ); }

function Status() {
  return (
    <Flex spacing="l" direction="column">
      <Input defaultValue="hippo" status="error" />
      <Input defaultValue="hippo" status="success" />
      <Input defaultValue="hippo" status="warning" />
    </Flex>
  );
}

清空

通过 hasClear 设置是否显示输入框清空按钮

inline

function HasClear() { return <Input hasClear defaultValue="点击右侧图标清空当前文本" onChange={console.log} />; }

function HasClear() {
  return <Input hasClear defaultValue="点击右侧图标清空当前文本" onChange={console.log} />;
}

无边框的输入框

通过 shape 设置简洁输入框，没有边框

inline

function NoBorder() { return <Input shape="simple" placeholder="简单输入框" />; }

function NoBorder() {
  return <Input shape="simple" placeholder="简单输入框" />;
}

内部元素

使用 leftElement, rightElement 传入内部的扩展内容

inline

// 以下变量从其他模块中引入： // Icon function Elements() { return ( <Flex spacing="l" direction="column"> <Input hasClear leftElement={<Icon type="search" />} rightElement={<Icon type="calendar" />} defaultValue="default value" /> </Flex> ); }

// 以下变量从其他模块中引入：
//  Icon

function Elements() {
  return (
    <Flex spacing="l" direction="column">
      <Input
        hasClear
        leftElement={<Icon type="search" />}
        rightElement={<Icon type="calendar" />}
        defaultValue="default value"
      />
    </Flex>
  );
}

关闭自动填充

可以通过 autoComplete="off" 属性关闭文本框的自动填充，但由于某些原因，现代浏览器大多不支持该设置。如果设置不生效，建议参考该文档。

禁用表单自动填充

阻止密码字段的自动填充

inline

function AutoCompleteOff() { return ( <Group> <h3>禁用表单自动填充</h3> <Input autoComplete="off" /> <h3>阻止密码字段的自动填充</h3> <Input autoComplete="new-password" /> </Group> ); }

function AutoCompleteOff() {
  return (
    <Group>
      <h3>禁用表单自动填充</h3>
      <Input autoComplete="off" />
      <h3>阻止密码字段的自动填充</h3>
      <Input autoComplete="new-password" />
    </Group>
  );
}

输入框组合

将输入框和其他元素进行组合

https://

.com

+86

inline

function Addons() { return ( <Flex spacing="l" direction="column"> <Group attached> <InputAddon>https://</InputAddon> <Input placeholder="portal.hemaos" /> <InputAddon>.com</InputAddon> </Group> <Group attached> <InputAddon>+86</InputAddon> <Input placeholder="11 位手机号码" /> </Group> </Flex> ); }

function Addons() {
  return (
    <Flex spacing="l" direction="column">
      <Group attached>
        <InputAddon>https://</InputAddon>
        <Input placeholder="portal.hemaos" />
        <InputAddon>.com</InputAddon>
      </Group>

      <Group attached>
        <InputAddon>+86</InputAddon>
        <Input placeholder="11 位手机号码" />
      </Group>
    </Flex>
  );
}

API

字段	描述
leftElement	ReactNode 左侧附加元素
rightElement	ReactNode 右侧附加元素
renderRightElement	() => ReactNode 自定义右侧元素渲染（自定义布局）
inputRef	RefObject<HTMLInputElement>
value	string
defaultValue	string
onChange	(value: string) => void
onBlur	FocusEventHandler<HTMLInputElement>
onFocus	FocusEventHandler<HTMLInputElement>
onKeyDown	KeyboardEventHandler<HTMLInputElement>
onClick	MouseEventHandler<HTMLDivElement>
onClear	() => void
hasClear	boolean
shape	"simple" | "solid"
status	"error" | "success" | "warning"
fill	boolean
readOnly	boolean
disabled	boolean
placeholder	string
autoComplete	string
autoFocus	boolean
type	string
min	number
max	number
width	StringOrNumber
style	CSSProperties
className	string