Input输入框

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

何时使用

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

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

代码演示

Input 输入框 - 图1

基本使用

基本使用。

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

Input 输入框 - 图2

前置/后置标签

用于配置一些固定组合。

  1. import { Input, Select, Icon } from 'antd';
  3. const Option = Select.Option;
  5. const selectBefore = (
  6.   <Select defaultValue="Http://" style={{ width: 90 }}>
  7.     <Option value="Http://">Http://</Option>
  8.     <Option value="Https://">Https://</Option>
  9.   </Select>
  10. );
  11. const selectAfter = (
  12.   <Select defaultValue=".com" style={{ width: 80 }}>
  13.     <Option value=".com">.com</Option>
  14.     <Option value=".jp">.jp</Option>
  15.     <Option value=".cn">.cn</Option>
  16.     <Option value=".org">.org</Option>
  17.   </Select>
  18. );
  20. ReactDOM.render(
  21.   <div>
  22.     <div style={{ marginBottom: 16 }}>
  23.       <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
  24.     </div>
  25.     <div style={{ marginBottom: 16 }}>
  26.       <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
  27.     </div>
  28.     <div style={{ marginBottom: 16 }}>
  29.       <Input addonAfter={<Icon type="setting" />} defaultValue="mysite" />
  30.     </div>
  31.   </div>,
  32.   mountNode,
  33. );

Input 输入框 - 图3

搜索框

带有搜索按钮的输入框，2.5.0 时新增。

  1. import { Input } from 'antd';
  3. const Search = Input.Search;
  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

适应文本高度的文本域

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

  1. import { Input } from 'antd';
  3. const { TextArea } = Input;
  5. ReactDOM.render(
  6.   <div>
  7.     <TextArea placeholder="Autosize height based on content lines" autosize />
  8.     <div style={{ margin: '24px 0' }} />
  9.     <TextArea
  10.       placeholder="Autosize height with minimum and maximum number of lines"
  11.       autosize={{ minRows: 2, maxRows: 6 }}
  12.     />
  13.   </div>,
  14.   mountNode,
  15. );

Input 输入框 - 图5

前缀和后缀

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

  1. import { Input, Tooltip, Icon } from 'antd';
  3. ReactDOM.render(
  4.   <Input
  5.     placeholder="Enter your username"
  6.     prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
  7.     suffix={
  8.       <Tooltip title="Extra information">
  9.         <Icon type="info-circle" style={{ color: 'rgba(0,0,0,.45)' }} />
  10.       </Tooltip>
  11.     }
  12.   />,
  13.   mountNode,
  14. );

Input 输入框 - 图6

带移除图标

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

  1. import { Input } from 'antd';
  3. const onChange = e => {
  4.   console.log(e);
  5. };
  7. ReactDOM.render(
  8.   <Input placeholder="input with clear icon" allowClear onChange={onChange} />,
  9.   mountNode,
  10. );

Input 输入框 - 图7

三种大小

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

  1. import { Input } from 'antd';
  3. ReactDOM.render(
  4.   <div className="example-input">
  5.     <Input size="large" placeholder="large size" />
  6.     <Input placeholder="default size" />
  7.     <Input size="small" placeholder="small size" />
  8.   </div>,
  9.   mountNode,
  10. );
  1. .example-input .ant-input {
  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 InputGroup = Input.Group;
  4. const Option = Select.Option;
  6. const options = [
  7.   {
  8.     value: 'zhejiang',
  9.     label: 'Zhejiang',
  10.     children: [
  11.       {
  12.         value: 'hangzhou',
  13.         label: 'Hangzhou',
  14.         children: [
  15.           {
  16.             value: 'xihu',
  17.             label: 'West Lake',
  18.           },
  19.         ],
  20.       },
  21.     ],
  22.   },
  23.   {
  24.     value: 'jiangsu',
  25.     label: 'Jiangsu',
  26.     children: [
  27.       {
  28.         value: 'nanjing',
  29.         label: 'Nanjing',
  30.         children: [
  31.           {
  32.             value: 'zhonghuamen',
  33.             label: 'Zhong Hua Men',
  34.           },
  35.         ],
  36.       },
  37.     ],
  38.   },
  39. ];
  41. class CompactDemo extends React.Component {
  42.   state = {
  43.     dataSource: [],
  44.   };
  46.   handleChange = value => {
  47.     this.setState({
  48.       dataSource:
  49.         !value || value.indexOf('@') >= 0
  50.           ? []
  51.           : [`${value}@gmail.com`, `${value}@163.com`, `${value}@qq.com`],
  52.     });
  53.   };
  55.   render() {
  56.     return (
  57.       <div>
  58.         <InputGroup size="large">
  59.           <Row gutter={8}>
  60.             <Col span={5}>
  61.               <Input defaultValue="0571" />
  62.             </Col>
  63.             <Col span={8}>
  64.               <Input defaultValue="26888888" />
  65.             </Col>
  66.           </Row>
  67.         </InputGroup>
  68.         <br />
  69.         <InputGroup compact>
  70.           <Input style={{ width: '20%' }} defaultValue="0571" />
  71.           <Input style={{ width: '30%' }} defaultValue="26888888" />
  72.         </InputGroup>
  73.         <br />
  74.         <InputGroup compact>
  75.           <Select defaultValue="Zhejiang">
  76.             <Option value="Zhejiang">Zhejiang</Option>
  77.             <Option value="Jiangsu">Jiangsu</Option>
  78.           </Select>
  79.           <Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
  80.         </InputGroup>
  81.         <br />
  82.         <InputGroup compact>
  83.           <Select defaultValue="Option1">
  84.             <Option value="Option1">Option1</Option>
  85.             <Option value="Option2">Option2</Option>
  86.           </Select>
  87.           <Input style={{ width: '50%' }} defaultValue="input content" />
  88.           <InputNumber />
  89.         </InputGroup>
  90.         <br />
  91.         <InputGroup compact>
  92.           <Input style={{ width: '50%' }} defaultValue="input content" />
  93.           <DatePicker style={{ width: '50%' }} />
  94.         </InputGroup>
  95.         <br />
  96.         <InputGroup compact>
  97.           <Select defaultValue="Option1-1">
  98.             <Option value="Option1-1">Option1-1</Option>
  99.             <Option value="Option1-2">Option1-2</Option>
  100.           </Select>
  101.           <Select defaultValue="Option2-2">
  102.             <Option value="Option2-1">Option2-1</Option>
  103.             <Option value="Option2-2">Option2-2</Option>
  104.           </Select>
  105.         </InputGroup>
  106.         <br />
  107.         <InputGroup compact>
  108.           <Select defaultValue="1">
  109.             <Option value="1">Between</Option>
  110.             <Option value="2">Except</Option>
  111.           </Select>
  112.           <Input style={{ width: 100, textAlign: 'center' }} placeholder="Minimum" />
  113.           <Input
  114.             style={{
  115.               width: 30,
  116.               borderLeft: 0,
  117.               pointerEvents: 'none',
  118.               backgroundColor: '#fff',
  119.             }}
  120.             placeholder="~"
  121.             disabled
  122.           />
  123.           <Input style={{ width: 100, textAlign: 'center', borderLeft: 0 }} placeholder="Maximum" />
  124.         </InputGroup>
  125.         <br />
  126.         <InputGroup compact>
  127.           <Select defaultValue="Sign Up">
  128.             <Option value="Sign Up">Sign Up</Option>
  129.             <Option value="Sign In">Sign In</Option>
  130.           </Select>
  131.           <AutoComplete
  132.             dataSource={this.state.dataSource}
  133.             style={{ width: 200 }}
  134.             onChange={this.handleChange}
  135.             placeholder="Email"
  136.           />
  137.         </InputGroup>
  138.         <br />
  139.         <InputGroup compact>
  140.           <Select style={{ width: '30%' }} defaultValue="Home">
  141.             <Option value="Home">Home</Option>
  142.             <Option value="Company">Company</Option>
  143.           </Select>
  144.           <Cascader style={{ width: '70%' }} options={options} placeholder="Select Address" />
  145.         </InputGroup>
  146.       </div>
  147.     );
  148.   }
  149. }
  151. ReactDOM.render(<CompactDemo />, mountNode);

Input 输入框 - 图9

文本域

用于多行输入。

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

Input 输入框 - 图10

输入时格式化展示

结合 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|[1-9][0-9]*)(\.[0-9]*)?$/;
  23.     if ((!Number.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.     if (value.charAt(value.length - 1) === '.' || value === '-') {
  32.       onChange(value.slice(0, -1));
  33.     }
  34.     if (onBlur) {
  35.       onBlur();
  36.     }
  37.   };
  39.   render() {
  40.     const { value } = this.props;
  41.     const title = value ? (
  42.       <span className="numeric-input-title">{value !== '-' ? formatNumber(value) : '-'}</span>
  43.     ) : (
  44.       'Input a number'
  45.     );
  46.     return (
  47.       <Tooltip
  48.         trigger={['focus']}
  49.         title={title}
  50.         placement="topLeft"
  51.         overlayClassName="numeric-input"
  52.       >
  53.         <Input
  54.           {...this.props}
  55.           onChange={this.onChange}
  56.           onBlur={this.onBlur}
  57.           placeholder="Input a number"
  58.           maxLength={25}
  59.         />
  60.       </Tooltip>
  61.     );
  62.   }
  63. }
  65. class NumericInputDemo extends React.Component {
  66.   constructor(props) {
  67.     super(props);
  68.     this.state = { value: '' };
  69.   }
  71.   onChange = value => {
  72.     this.setState({ value });
  73.   };
  75.   render() {
  76.     return (
  77.       <NumericInput style={{ width: 120 }} value={this.state.value} onChange={this.onChange} />
  78.     );
  79.   }
  80. }
  82. 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 输入框 - 图11

密码框

密码框，版本 3.12.0 中新增。

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

API

Input

参数说明类型默认值
addonAfter带标签的 input，设置后置标签string|ReactNode
addonBefore带标签的 input，设置前置标签string|ReactNode
defaultValue输入框默认内容string
disabled是否禁用状态，默认为 falsebooleanfalse
id输入框的 idstring
prefix带有前缀图标的 inputstring|ReactNode
size控件大小。注：标准表单内的输入框大小限制为 large。可选 large default smallstringdefault
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

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

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

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

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

其余属性和 Input 一致。

Input.Group

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

Input.Password (3.12.0 中新增)

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

FAQ

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

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

  1. const suffix = condition ? <Icon type="smile" /> : <span />;
  3. <Input suffix={suffix} />;