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://" style={{ width: 90 }}>
  8.     <Option value="http://">http://</Option>
  9.     <Option value="https://">https://</Option>
  10.   </Select>
  11. );
  12. const selectAfter = (
  13.   <Select defaultValue=".com" style={{ width: 80 }}>
  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. );

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 InputGroup = Input.Group;
  4. const { Option } = Select;
  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 className="site-input-group-wrapper">
  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.             className="site-input-split"
  115.             style={{
  116.               width: 30,
  117.               borderLeft: 0,
  118.               borderRight: 0,
  119.               pointerEvents: 'none',
  120.             }}
  121.             placeholder="~"
  122.             disabled
  123.           />
  124.           <Input style={{ width: 100, textAlign: 'center', borderLeft: 0 }} placeholder="Maximum" />
  125.         </InputGroup>
  126.         <br />
  127.         <InputGroup compact>
  128.           <Select defaultValue="Sign Up">
  129.             <Option value="Sign Up">Sign Up</Option>
  130.             <Option value="Sign In">Sign In</Option>
  131.           </Select>
  132.           <AutoComplete
  133.             dataSource={this.state.dataSource}
  134.             style={{ width: 200 }}
  135.             onChange={this.handleChange}
  136.             placeholder="Email"
  137.           />
  138.         </InputGroup>
  139.         <br />
  140.         <InputGroup compact>
  141.           <Select style={{ width: '30%' }} defaultValue="Home">
  142.             <Option value="Home">Home</Option>
  143.             <Option value="Company">Company</Option>
  144.           </Select>
  145.           <Cascader style={{ width: '70%' }} options={options} placeholder="Select Address" />
  146.         </InputGroup>
  147.       </div>
  148.     );
  149.   }
  150. }
  152. ReactDOM.render(<CompactDemo />, mountNode);
  1. .site-input-group-wrapper .site-input-split {
  2.   background-color: #fff;
  3. }

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 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

参数说明类型默认值
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 一致。

参数说明类型默认值
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} />;