Input输入框

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

何时使用

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

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

代码演示

Input 输入框 - 图1

基本使用

基本使用。

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

Input 输入框 - 图2

前置/后置标签

用于配置一些固定组合。

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

Input 输入框 - 图3

搜索框

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

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

Input 输入框 - 图4

适应文本高度的文本域

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

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

Input 输入框 - 图5

前缀和后缀

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

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

Input 输入框 - 图6

带移除图标

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

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

Input 输入框 - 图7

三种大小

我们为 <Input /> 输入框定义了三种尺寸(大、默认、小),高度分别为 40px32px24px

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

Input 输入框 - 图9

文本域

用于多行输入。

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

Input 输入框 - 图10

输入时格式化展示

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

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

Input 输入框 - 图11

密码框

密码框,版本 3.12.0 中新增。

  1. import { Input } from 'antd';
  2. 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

如果 InputForm.Item 内,并且 Form.Item 设置了 idoptions 属性,则 value defaultValueid 属性会被自动设置。

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 />;
  2. <Input suffix={suffix} />;