Input输入框

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

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

    基本使用

    基本使用。

    Input输入框 - 图2

    用于配置一些固定组合。

    3. const { Option } = Select;
    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. );

    搜索框

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

    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(
    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. );

    前缀和后缀

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

    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.   mountNode,
    13. );

    Input输入框 - 图6

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

    三种大小

    我们为 <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. );
    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>
    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.         </InputGroup>
    80.         <br />
    81.         <InputGroup compact>
    82.           <Select defaultValue="Option1">
    83.             <Option value="Option1">Option1</Option>
    84.             <Option value="Option2">Option2</Option>
    85.           </Select>
    86.           <Input style={{ width: '50%' }} defaultValue="input content" />
    87.           <InputNumber />
    88.         </InputGroup>
    89.         <br />
    90.         <InputGroup compact>
    91.           <Input style={{ width: '50%' }} defaultValue="input content" />
    92.           <DatePicker style={{ width: '50%' }} />
    93.         </InputGroup>
    94.         <br />
    95.         <InputGroup compact>
    96.           <Select defaultValue="Option1-1">
    97.             <Option value="Option1-1">Option1-1</Option>
    98.             <Option value="Option1-2">Option1-2</Option>
    100.           <Select defaultValue="Option2-2">
    101.             <Option value="Option2-1">Option2-1</Option>
    102.             <Option value="Option2-2">Option2-2</Option>
    103.           </Select>
    104.         </InputGroup>
    105.         <br />
    106.         <InputGroup compact>
    107.           <Select defaultValue="1">
    108.             <Option value="1">Between</Option>
    109.             <Option value="2">Except</Option>
    110.           </Select>
    111.           <Input style={{ width: 100, textAlign: 'center' }} placeholder="Minimum" />
    112.           <Input
    113.             style={{
    114.               width: 30,
    115.               borderLeft: 0,
    116.               pointerEvents: 'none',
    117.               backgroundColor: '#fff',
    118.             }}
    119.             placeholder="~"
    120.             disabled
    121.           />
    122.           <Input style={{ width: 100, textAlign: 'center', borderLeft: 0 }} placeholder="Maximum" />
    123.         </InputGroup>
    124.         <br />
    125.         <InputGroup compact>
    126.           <Select defaultValue="Sign Up">
    127.             <Option value="Sign Up">Sign Up</Option>
    128.             <Option value="Sign In">Sign In</Option>
    129.           </Select>
    130.           <AutoComplete
    131.             dataSource={this.state.dataSource}
    132.             style={{ width: 200 }}
    133.             onChange={this.handleChange}
    134.             placeholder="Email"
    135.           />
    136.         </InputGroup>
    137.         <br />
    138.         <InputGroup compact>
    139.           <Select style={{ width: '30%' }} defaultValue="Home">
    140.             <Option value="Home">Home</Option>
    141.             <Option value="Company">Company</Option>
    142.           </Select>
    143.           <Cascader style={{ width: '70%' }} options={options} placeholder="Select Address" />
    144.         </InputGroup>
    145.       </div>
    146.     );
    147.   }
    148. }
    150. ReactDOM.render(<CompactDemo />, mountNode);

    文本域

    用于多行输入。

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

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

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

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

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

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

    其余属性和 Input 一致。

    Input.Group

    1. <Input.Group>
    2.   <input />
    3.   <input />
    4. </Input.Group>

    Input.Password (3.12.0 中新增)

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