Input 输入框 #

概述 #

Input 输入框是最基础的数据录入组件，支持多种输入类型和功能扩展。

基础用法 #

基本输入框 #

tsx

import { Input } from 'antd';

<Input placeholder="请输入内容" />

三种大小 #

tsx

import { Input, Space } from 'antd';

<Space direction="vertical">
  <Input size="large" placeholder="大尺寸" />
  <Input placeholder="默认尺寸" />
  <Input size="small" placeholder="小尺寸" />
</Space>

禁用状态 #

tsx

import { Input } from 'antd';

<Input disabled placeholder="禁用状态" />

前缀和后缀 #

tsx

import { Input, Space } from 'antd';
import { UserOutlined, SettingOutlined } from '@ant-design/icons';

<Space direction="vertical">
  <Input prefix={<UserOutlined />} placeholder="用户名" />
  <Input suffix={<SettingOutlined />} placeholder="设置" />
  <Input prefix="￥" suffix="RMB" placeholder="金额" />
</Space>

前置和后置标签 #

tsx

import { Input, Select, Space } from 'antd';

const { Option } = Select;

<Space direction="vertical">
  <Input addonBefore="http://" addonAfter=".com" placeholder="网站地址" />
  <Input addonBefore={<Select defaultValue="http" style={{ width: 80 }}>
    <Option value="http">http</Option>
    <Option value="https">https</Option>
  </Select>} placeholder="网站地址" />
</Space>

输入框变体 #

密码输入框 #

tsx

import { Input, Space } from 'antd';

const { Password } = Input;

<Space direction="vertical">
  <Password placeholder="密码" />
  <Password.Password placeholder="密码" visibilityToggle={false} />
</Space>

文本域 #

tsx

import { Input } from 'antd';

const { TextArea } = Input;

<TextArea rows={4} placeholder="请输入内容" />
<TextArea rows={4} maxLength={100} showCount placeholder="限制字数" />
<TextArea rows={4} allowClear placeholder="可清除" />

搜索框 #

tsx

import { Input, Space } from 'antd';

const { Search } = Input;

<Space direction="vertical">
  <Search placeholder="搜索" onSearch={(value) => console.log(value)} />
  <Search placeholder="搜索" allowClear />
  <Search placeholder="搜索" enterButton />
  <Search placeholder="搜索" enterButton="搜索" loading />
</Space>

密码强度 #

tsx

import { Input, Progress } from 'antd';
import { useState } from 'react';

const [password, setPassword] = useState('');

const getPasswordStrength = (pwd) => {
  let strength = 0;
  if (pwd.length >= 6) strength += 20;
  if (pwd.length >= 10) strength += 20;
  if (/[A-Z]/.test(pwd)) strength += 20;
  if (/[a-z]/.test(pwd)) strength += 20;
  if (/[0-9]/.test(pwd)) strength += 10;
  if (/[^A-Za-z0-9]/.test(pwd)) strength += 10;
  return strength;
};

<>
  <Input.Password
    value={password}
    onChange={(e) => setPassword(e.target.value)}
    placeholder="密码"
  />
  <Progress percent={getPasswordStrength(password)} />
</>

状态 #

校验状态 #

tsx

import { Input, Space } from 'antd';

<Space direction="vertical">
  <Input status="error" placeholder="错误状态" />
  <Input status="warning" placeholder="警告状态" />
</Space>

允许清除 #

tsx

import { Input } from 'antd';

<Input allowClear placeholder="可清除" />

字数统计 #

tsx

import { Input } from 'antd';

<Input showCount maxLength={20} placeholder="字数统计" />

API #

Input #

属性	说明	类型	默认值
addonAfter	后置标签	ReactNode	-
addonBefore	前置标签	ReactNode	-
allowClear	允许清除	boolean \|	false
bordered	是否有边框	boolean	true
defaultValue	默认值	string	-
disabled	禁用状态	boolean	false
id	ID	string	-
maxLength	最大长度	number	-
prefix	前缀	ReactNode	-
showCount	显示字数	boolean \|	false
size	大小	`large` \| `middle` \| `small`	-
status	状态	`error` \| `warning`	-
suffix	后缀	ReactNode	-
type	类型	string	`text`
value	值	string	-
onChange	变化回调	(e) => void	-
onPressEnter	回车回调	(e) => void	-

Input.Password #

属性	说明	类型	默认值
iconRender	密码可见图标	(visible) => ReactNode	-
visibilityToggle	显示切换按钮	boolean \| VisibilityToggle	true

Input.TextArea #

属性	说明	类型	默认值
autoSize	自适应高度	boolean \|	false
showCount	显示字数	boolean \|	false

Input.Search #

属性	说明	类型	默认值
enterButton	搜索按钮	boolean \| ReactNode	false
loading	加载状态	boolean	false
onSearch	搜索回调	(value, event) => void	-

最佳实践 #

1. 表单中使用 #

tsx

import { Form, Input, Button } from 'antd';

<Form.Item name="username" label="用户名" rules={[{ required: true }]}>
  <Input placeholder="请输入用户名" />
</Form.Item>

2. 输入验证 #

tsx

import { Form, Input } from 'antd';

<Form.Item
  name="email"
  label="邮箱"
  rules={[
    { required: true, message: '请输入邮箱' },
    { type: 'email', message: '邮箱格式不正确' },
  ]}
>
  <Input placeholder="请输入邮箱" />
</Form.Item>

3. 格式化输入 #

tsx

import { Input } from 'antd';
import { useState } from 'react';

const [value, setValue] = useState('');

const formatPhone = (value) => {
  return value.replace(/\D/g, '').replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
};

<Input
  value={value}
  onChange={(e) => setValue(formatPhone(e.target.value))}
  placeholder="手机号"
  maxLength={13}
/>

下一步 #

接下来学习 Select 选择器组件！