Input输入框

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

何时使用

  • 需要用户输入表单域内容时。

  • 提供组合型输入框，带搜索的输入框，还可以进行大小选择。

代码演示

Input输入框 - 图1

基本使用

基本使用。

  1. import { Input } from 'antd';
  3. ReactDOM.render(<Input placeholder="Basic usage" />, mountNode);

Input输入框 - 图2

前置/后置标签

用于配置一些固定组合。

  1. import { Input, Select } from 'antd';
  2. import { SettingOutlined } from '@ant-design/icons';
  4. const { Option } = Select;
  6. const selectBefore = (
  7.   <Select defaultValue="http://" className="select-before">
  8.     <Option value="http://">http://</Option>
  9.     <Option value="https://">https://</Option>
  10.   </Select>
  11. );
  12. const selectAfter = (
  13.   <Select defaultValue=".com" className="select-after">
  14.     <Option value=".com">.com</Option>
  15.     <Option value=".jp">.jp</Option>
  16.     <Option value=".cn">.cn</Option>
  17.     <Option value=".org">.org</Option>
  18.   </Select>
  19. );
  21. ReactDOM.render(
  22.   <div>
  23.     <div style={{ marginBottom: 16 }}>
  24.       <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
  25.     </div>
  26.     <div style={{ marginBottom: 16 }}>
  27.       <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
  28.     </div>
  29.     <div style={{ marginBottom: 16 }}>
  30.       <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
  31.     </div>
  32.     <div style={{ marginBottom: 16 }}>
  33.       <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
  34.     </div>
  35.   </div>,
  36.   mountNode,
  37. );
  1. .select-before {
  2.   width: 90px;
  3. }
  5. .select-after {
  6.   width: 80px;
  7. }
  9. [data-theme='compact'] .select-before {
  10.   width: 71px;
  11. }
  13. [data-theme='compact'] .select-after {
  14.   width: 65px;
  15. }

Input输入框 - 图3

搜索框

带有搜索按钮的输入框。

  1. import { Input } from 'antd';
  3. const { Search } = Input;
  5. ReactDOM.render(
  6.   <div>
  7.     <Search
  8.       placeholder="input search text"
  9.       onSearch={value => console.log(value)}
  10.       style={{ width: 200 }}
  11.     />
  12.     <br />
  13.     <br />
  14.     <Search placeholder="input search text" onSearch={value => console.log(value)} enterButton />
  15.     <br />
  16.     <br />
  17.     <Search
  18.       placeholder="input search text"
  19.       enterButton="Search"
  20.       size="large"
  21.       onSearch={value => console.log(value)}
  22.     />
  23.   </div>,
  24.   mountNode,
  25. );

Input输入框 - 图4

文本域

用于多行输入。

  1. import { Input } from 'antd';
  3. const { TextArea } = Input;
  5. ReactDOM.render(<TextArea rows={4} />, mountNode);

Input输入框 - 图5

输入时格式化展示

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

  1. import { Input, Tooltip } from 'antd';
  3. function formatNumber(value) {
  4.   value += '';
  5.   const list = value.split('.');
  6.   const prefix = list[0].charAt(0) === '-' ? '-' : '';
  7.   let num = prefix ? list[0].slice(1) : list[0];
  8.   let result = '';
  9.   while (num.length > 3) {
  10.     result = `,${num.slice(-3)}${result}`;
  11.     num = num.slice(0, num.length - 3);
  12.   }
  13.   if (num) {
  14.     result = num + result;
  15.   }
  16.   return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
  17. }
  19. class NumericInput extends React.Component {
  20.   onChange = e => {
  21.     const { value } = e.target;
  22.     const reg = /^-?[0-9]*(\.[0-9]*)?$/;
  23.     if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
  24.       this.props.onChange(value);
  25.     }
  26.   };
  28.   // '.' at the end or only '-' in the input box.
  29.   onBlur = () => {
  30.     const { value, onBlur, onChange } = this.props;
  31.     let valueTemp = value;
  32.     if (value.charAt(value.length - 1) === '.' || value === '-') {
  33.       valueTemp = value.slice(0, -1);
  34.     }
  35.     onChange(valueTemp.replace(/0*(\d+)/, '$1'));
  36.     if (onBlur) {
  37.       onBlur();
  38.     }
  39.   };
  41.   render() {
  42.     const { value } = this.props;
  43.     const title = value ? (
  44.       <span className="numeric-input-title">{value !== '-' ? formatNumber(value) : '-'}</span>
  45.     ) : (
  46.       'Input a number'
  47.     );
  48.     return (
  49.       <Tooltip
  50.         trigger={['focus']}
  51.         title={title}
  52.         placement="topLeft"
  53.         overlayClassName="numeric-input"
  54.       >
  55.         <Input
  56.           {...this.props}
  57.           onChange={this.onChange}
  58.           onBlur={this.onBlur}
  59.           placeholder="Input a number"
  60.           maxLength={25}
  61.         />
  62.       </Tooltip>
  63.     );
  64.   }
  65. }
  67. class NumericInputDemo extends React.Component {
  68.   constructor(props) {
  69.     super(props);
  70.     this.state = { value: '' };
  71.   }
  73.   onChange = value => {
  74.     this.setState({ value });
  75.   };
  77.   render() {
  78.     return (
  79.       <NumericInput style={{ width: 120 }} value={this.state.value} onChange={this.onChange} />
  80.     );
  81.   }
  82. }
  84. ReactDOM.render(<NumericInputDemo />, mountNode);
  1. /* to prevent the arrow overflow the popup container,
  2. or the height is not enough when content is empty */
  3. .numeric-input .ant-tooltip-inner {
  4.   min-width: 32px;
  5.   min-height: 37px;
  6. }
  8. .numeric-input .numeric-input-title {
  9.   font-size: 14px;
  10. }

Input输入框 - 图6

密码框

密码框。

  1. import { Input } from 'antd';
  3. ReactDOM.render(<Input.Password placeholder="input password" />, mountNode);

Input输入框 - 图7

三种大小

我们为 <Input /> 输入框定义了三种尺寸（大、默认、小），高度分别为 40px、32px 和 24px。

  1. import { Input } from 'antd';
  2. import { UserOutlined } from '@ant-design/icons';
  4. ReactDOM.render(
  5.   <div className="example-input">
  6.     <Input size="large" placeholder="large size" prefix={<UserOutlined />} />
  7.     <Input placeholder="default size" prefix={<UserOutlined />} />
  8.     <Input size="small" placeholder="small size" prefix={<UserOutlined />} />
  9.     <Input.Password size="large" placeholder="large Password" />
  10.   </div>,
  11.   mountNode,
  12. );
  1. .example-input > span {
  2.   width: 200px;
  3.   margin: 0 8px 8px 0;
  4. }

Input输入框 - 图8

输入框组合

输入框的组合展现。

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

  1. import { Input, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'antd';
  3. const { Option } = Select;
  5. const options = [
  6.   {
  7.     value: 'zhejiang',
  8.     label: 'Zhejiang',
  9.     children: [
  10.       {
  11.         value: 'hangzhou',
  12.         label: 'Hangzhou',
  13.         children: [
  14.           {
  15.             value: 'xihu',
  16.             label: 'West Lake',
  17.           },
  18.         ],
  19.       },
  20.     ],
  21.   },
  22.   {
  23.     value: 'jiangsu',
  24.     label: 'Jiangsu',
  25.     children: [
  26.       {
  27.         value: 'nanjing',
  28.         label: 'Nanjing',
  29.         children: [
  30.           {
  31.             value: 'zhonghuamen',
  32.             label: 'Zhong Hua Men',
  33.           },
  34.         ],
  35.       },
  36.     ],
  37.   },
  38. ];
  40. const App = () => (
  41.   <div className="site-input-group-wrapper">
  42.     <Input.Group size="large">
  43.       <Row gutter={8}>
  44.         <Col span={5}>
  45.           <Input defaultValue="0571" />
  46.         </Col>
  47.         <Col span={8}>
  48.           <Input defaultValue="26888888" />
  49.         </Col>
  50.       </Row>
  51.     </Input.Group>
  52.     <br />
  53.     <Input.Group compact>
  54.       <Input style={{ width: '20%' }} defaultValue="0571" />
  55.       <Input style={{ width: '30%' }} defaultValue="26888888" />
  56.     </Input.Group>
  57.     <br />
  58.     <Input.Group compact>
  59.       <Select defaultValue="Zhejiang">
  60.         <Option value="Zhejiang">Zhejiang</Option>
  61.         <Option value="Jiangsu">Jiangsu</Option>
  62.       </Select>
  63.       <Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
  64.     </Input.Group>
  65.     <br />
  66.     <Input.Group compact>
  67.       <Input style={{ width: '20%' }} defaultValue="0571" />
  68.       <Input.Search style={{ width: '30%' }} defaultValue="26888888" />
  69.     </Input.Group>
  70.     <br />
  71.     <Input.Group compact>
  72.       <Select defaultValue="Option1">
  73.         <Option value="Option1">Option1</Option>
  74.         <Option value="Option2">Option2</Option>
  75.       </Select>
  76.       <Input style={{ width: '50%' }} defaultValue="input content" />
  77.       <InputNumber />
  78.     </Input.Group>
  79.     <br />
  80.     <Input.Group compact>
  81.       <Input style={{ width: '50%' }} defaultValue="input content" />
  82.       <DatePicker style={{ width: '50%' }} />
  83.     </Input.Group>
  84.     <br />
  85.     <Input.Group compact>
  86.       <Select defaultValue="Option1-1">
  87.         <Option value="Option1-1">Option1-1</Option>
  88.         <Option value="Option1-2">Option1-2</Option>
  89.       </Select>
  90.       <Select defaultValue="Option2-2">
  91.         <Option value="Option2-1">Option2-1</Option>
  92.         <Option value="Option2-2">Option2-2</Option>
  93.       </Select>
  94.     </Input.Group>
  95.     <br />
  96.     <Input.Group compact>
  97.       <Select defaultValue="1">
  98.         <Option value="1">Between</Option>
  99.         <Option value="2">Except</Option>
  100.       </Select>
  101.       <Input style={{ width: 100, textAlign: 'center' }} placeholder="Minimum" />
  102.       <Input
  103.         className="site-input-split"
  104.         style={{
  105.           width: 30,
  106.           borderLeft: 0,
  107.           borderRight: 0,
  108.           pointerEvents: 'none',
  109.         }}
  110.         placeholder="~"
  111.         disabled
  112.       />
  113.       <Input
  114.         className="site-input-right"
  115.         style={{
  116.           width: 100,
  117.           textAlign: 'center',
  118.         }}
  119.         placeholder="Maximum"
  120.       />
  121.     </Input.Group>
  122.     <br />
  123.     <Input.Group compact>
  124.       <Select defaultValue="Sign Up" style={{ width: '30%' }}>
  125.         <Option value="Sign Up">Sign Up</Option>
  126.         <Option value="Sign In">Sign In</Option>
  127.       </Select>
  128.       <AutoComplete
  129.         style={{ width: '70%' }}
  130.         placeholder="Email"
  131.         options={[{ value: 'text 1' }, { value: 'text 2' }]}
  132.       />
  133.     </Input.Group>
  134.     <br />
  135.     <Input.Group compact>
  136.       <Select style={{ width: '30%' }} defaultValue="Home">
  137.         <Option value="Home">Home</Option>
  138.         <Option value="Company">Company</Option>
  139.       </Select>
  140.       <Cascader style={{ width: '70%' }} options={options} placeholder="Select Address" />
  141.     </Input.Group>
  142.   </div>
  143. );
  145. ReactDOM.render(<App />, mountNode);
  1. .site-input-group-wrapper .site-input-split {
  2.   background-color: #fff;
  3. }
  5. .site-input-group-wrapper .site-input-right {
  6.   border-left-width: 0;
  7. }
  9. .site-input-group-wrapper .site-input-right:hover {
  10.   border-left-width: 1px;
  11. }

Input输入框 - 图9

搜索框 loading

用于 onSearch 的时候展示 loading。

  1. import { Input } from 'antd';
  3. const { Search } = Input;
  5. ReactDOM.render(
  6.   <div>
  7.     <Search placeholder="input search loading deault" loading />
  8.     <br />
  9.     <br />
  10.     <Search placeholder="input search loading with enterButton" loading enterButton />
  11.   </div>,
  12.   mountNode,
  13. );

Input输入框 - 图10

适应文本高度的文本域

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

  1. import { Input } from 'antd';
  3. const { TextArea } = Input;
  5. class Demo extends React.Component {
  6.   state = {
  7.     value: '',
  8.   };
  10.   onChange = ({ target: { value } }) => {
  11.     this.setState({ value });
  12.   };
  14.   render() {
  15.     const { value } = this.state;
  17.     return (
  18.       <div>
  19.         <TextArea placeholder="Autosize height based on content lines" autoSize />
  20.         <div style={{ margin: '24px 0' }} />
  21.         <TextArea
  22.           placeholder="Autosize height with minimum and maximum number of lines"
  23.           autoSize={{ minRows: 2, maxRows: 6 }}
  24.         />
  25.         <div style={{ margin: '24px 0' }} />
  26.         <TextArea
  27.           value={value}
  28.           onChange={this.onChange}
  29.           placeholder="Controlled autosize"
  30.           autoSize={{ minRows: 3, maxRows: 5 }}
  31.         />
  32.       </div>
  33.     );
  34.   }
  35. }
  37. ReactDOM.render(<Demo />, mountNode);

Input输入框 - 图11

前缀和后缀

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

  1. import { Input, Tooltip } from 'antd';
  2. import { InfoCircleOutlined, UserOutlined } from '@ant-design/icons';
  4. ReactDOM.render(
  5.   <div>
  6.     <Input
  7.       placeholder="Enter your username"
  8.       prefix={<UserOutlined className="site-form-item-icon" />}
  9.       suffix={
  10.         <Tooltip title="Extra information">
  11.           <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
  12.         </Tooltip>
  13.       }
  14.     />
  15.     <br />
  16.     <br />
  17.     <Input prefix="￥" suffix="RMB" />
  19.     <br />
  20.     <br />
  22.     <Input prefix="￥" suffix="RMB" disabled />
  23.   </div>,
  24.   mountNode,
  25. );

Input输入框 - 图12

带移除图标

带移除图标的输入框，点击图标删除所有内容。

  1. import { Input } from 'antd';
  3. const { TextArea } = Input;
  5. const onChange = e => {
  6.   console.log(e);
  7. };
  9. ReactDOM.render(
  10.   <div>
  11.     <Input placeholder="input with clear icon" allowClear onChange={onChange} />
  12.     <br />
  13.     <br />
  14.     <TextArea placeholder="textarea with clear icon" allowClear onChange={onChange} />
  15.   </div>,
  16.   mountNode,
  17. );

API

Input

参数说明类型默认值
addonAfter带标签的 input，设置后置标签string|ReactNode
addonBefore带标签的 input，设置前置标签string|ReactNode
defaultValue输入框默认内容string
disabled是否禁用状态，默认为 falsebooleanfalse
id输入框的 idstring
maxLength最大长度number
prefix带有前缀图标的 inputstring|ReactNode
size控件大小。注：标准表单内的输入框大小限制为 large。large | middle | small无
suffix带有后缀图标的 inputstring|ReactNode
type声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 Input.TextArea 代替 type="textarea")。stringtext
value输入框内容string
onChange输入框内容变化时的回调function(e)
onPressEnter按下回车的回调function(e)
allowClear可以点击清除图标删除内容boolean

如果 Input 在 Form.Item 内，并且 Form.Item 设置了 id 和 options 属性，则 value defaultValue 和 id 属性会被自动设置。

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

Input.TextArea

参数说明类型默认值
autoSize自适应内容高度，可设置为 true|false 或对象：{ minRows: 2, maxRows: 6 }。boolean|objectfalse
defaultValue输入框默认内容string
value输入框内容string
onPressEnter按下回车的回调function(e)
allowClear可以点击清除图标删除内容boolean
onResizeresize 回调function({ width, height })

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

Input.Search

参数说明类型默认值
enterButton是否有确认按钮，可设为按钮文字。该属性会与 addonAfter 冲突。boolean|ReactNodefalse
onSearch点击搜索或按下回车键时的回调function(value, event)
loading搜索 loadingboolean

其余属性和 Input 一致。

Input.Group

参数说明类型默认值
compact是否用紧凑模式booleanfalse
sizeInput.Group 中所有的 Input 的大小，可选 large default smallstringdefault
  1. <Input.Group>
  2.   <input />
  3.   <input />
  4. </Input.Group>

Input.Password

参数说明类型默认值
visibilityToggle是否显示切换按钮booleantrue

FAQ

为什么我动态改变 prefix/suffix 时，Input 会失去焦点？

当 Input 动态添加或者删除 prefix/suffix 时，React 会重新创建 DOM 结构而新的 input 是没有焦点的。你可以预设一个空的 <span /> 来保持 DOM 结构不变：

const suffix = condition ? <Icon type="smile" /> : <span />;

<Input suffix={suffix} />;