Input 输入框

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

何时使用

• 需要用户输入表单域内容时。
• 提供组合型输入框，带搜索的输入框，还可以进行大小选择。

代码演示

基本使用

基本使用。

import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Row, Col } from 'choerodon-ui';
​
ReactDOM.render(
  <Row gutter={8}>
    <Col span={12}>
      <Input placeholder="Basic usage" maxLength={50} required label="Basic" copy />
    </Col>
    <Col span={12}>
      <Input defaultValue="123" placeholder="Basic usage" maxLength={20} required label="Basic" disabled />
    </Col>
  </Row>,
  document.getElementById('container'));
​

三种大小

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

注意： 在表单里面，我们只使用大尺寸的输入框。

import React from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'choerodon-ui';
​
ReactDOM.render(
  <div className="example-input">
    <div style={{ marginBottom: 10 }}>
      <Input
        size="large"
        placeholder="large size"
        label="Large"
        maxLength="20"
      />
    </div>
    <div style={{ marginBottom: 10 }}>
      <Input placeholder="default size" />
    </div>
    <Input size="small" placeholder="small size" label="small" />
  </div>,
  document.getElementById('container'),
);
​

前置/后置标签

用于配置一些固定组合。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Select, Icon } from 'choerodon-ui';
​
const Option = Select.Option;
​
const selectBefore = (
  <Select defaultValue="Http://" style={{ width: 90 }}>
    <Option value="Http://">Http://</Option>
    <Option value="Https://">Https://</Option>
  </Select>
);
const selectAfter = (
  <Select defaultValue=".com" style={{ width: 80 }}>
    <Option value=".com">.com</Option>
    <Option value=".jp">.jp</Option>
    <Option value=".cn">.cn</Option>
    <Option value=".org">.org</Option>
  </Select>
);
​
ReactDOM.render(
  <div>
    <div style={{ marginBottom: 16 }}>
      <Input addonBefore="Http://" addonAfter=".com" defaultValue="mysite" maxLength={30} />
    </div>
    <div style={{ marginBottom: 16 }}>
      <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />
    </div>
    <div style={{ marginBottom: 16 }}>
      <Input addonAfter={<Icon type="setting" />} label="mysite" />
    </div>
  </div>,
  document.getElementById('container'),

输入框组合

输入框的组合展现。

注意：使用 compact 模式时，不需要通过 Col 来控制宽度。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Col, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'choerodon-ui';
​
const InputGroup = Input.Group;
const Option = Select.Option;
​
const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {

搜索框

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'choerodon-ui';
​
const Search = Input.Search;
​
ReactDOM.render(
  <div>
    <Search
      placeholder="input search text"
      onSearch={value => console.log(value)}
      style={{ width: 200 }}
    />
    <br />
    <br />
    <Search placeholder="input search text" onSearch={value => console.log(value)} enterButton />
    <br />
    <br />
    <Search placeholder="input search text" enterButton="Search" size="large" />
  </div>,
  document.getElementById('container'),
);
​

文本域

用于多行输入。

import React from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'choerodon-ui';
​
const { TextArea } = Input;
​
ReactDOM.render(
  <TextArea rows={4} maxLength={20} label="textarea" placeholder="textarea usage" />,
  document.getElementById('container'),
);
​

适应文本高度的文本域

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'choerodon-ui';
​
const { TextArea } = Input;
​
ReactDOM.render(
  <div>
    <TextArea placeholder="Autosize height based on content lines" autosize />
    <div style={{ margin: '24px 0' }} />
    <TextArea
      placeholder="Autosize height with minimum and maximum number of lines"
      autosize={{ minRows: 2, maxRows: 6 }}
    />
  </div>,
  document.getElementById('container'),
);
​

输入时格式化展示

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Tooltip } from 'choerodon-ui';
​
function formatNumber(value) {
  value += '';
  const list = value.split('.');
  const prefix = list[0].charAt(0) === '-' ? '-' : '';
  let num = prefix ? list[0].slice(1) : list[0];
  let result = '';
  while (num.length > 3) {
    result = `,${num.slice(-3)}${result}`;
    num = num.slice(0, num.length - 3);
  }
  if (num) {
    result = num + result;
  }
  return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
}
​
class NumericInput extends React.Component {
  onChange = (e) => {
    const { value } = e.target;
    const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
    if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
      this.props.onChange(value);
    }
  }
​
  // '.' at the end or only '-' in the input box.
  onBlur = () => {
    const { value, onBlur, onChange } = this.props;

前缀和后缀

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Icon } from 'choerodon-ui';
​
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: 'xxx',
    };
  }
​
  emitEmpty = () => {
    this.userNameInput.focus();
    this.setState({ userName: '' });
  }
​
  onChangeUserName = (e) => {
    this.setState({ userName: e.target.value });
  }
​
  render() {
    const { userName } = this.state;
    const suffix = userName ? <Icon type="close" onClick={this.emitEmpty} /> : null;
    return (
      <Input
        placeholder="Enter your username"
        prefix="input-"
        suffix={suffix}

密码输入框

密码输入框

import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Row, Col } from 'choerodon-ui';
​
ReactDOM.render(
  <Row gutter={8}>
    <Col span={8}>
      <Input placeholder="username" maxLength={50} required label="username" />
    </Col>
    <Col span={8}>
      <Input type="password" placeholder="password" maxLength={20} required label="password" />
    </Col>
    <Col span={8}>
      <Input type="password" showPasswordEye placeholder="password" maxLength={20} required label="password" />
    </Col>
  </Row>,
  document.getElementById('container'));
​

API

Input

如果 Input 在 Form.Item 内，并且 Form.Item 设置了 id 和 options 属性，则 value defaultValue 和 id 属性会被自动设置。

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

Input.TextArea

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

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

Input.Search

其余属性和 Input 一致。

Input.Group

<Input.Group>
  <Input />
  <Input />
</Input.Group>