• Input输入框
    • 何时使用
    • 代码演示
    • API
      • Input
      • Input.TextArea
        • Input.Search
        • Input.Group
        • Input.Password (3.12.0 中新增)
    • FAQ
      • 为什么我动态改变 prefix/suffix 时，Input 会失去焦点？

    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} />;