• Input 输入框

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

    何时使用

    代码演示

    基本使用。
    expand code expand code
    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>,
      mountNode);
    
    用于配置一些固定组合。
    expand code expand code
    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>,
      mountNode);
    
    带有搜索按钮的输入框。
    expand code expand code
    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>,
      mountNode);
    
    autosize 属性适用于 textarea 节点,并且只有高度会自动变化。另外 autosize 可以设定为一个对象,指定最小行数和最大行数。
    expand code expand code
    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>,
      mountNode);
    
    在输入框上添加前缀或后缀图标。
    expand code expand code
    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}
            label="username"
            value={userName}
            onChange={this.onChangeUserName}
            ref={node => this.userNameInput = node}
            copy
          />
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    

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

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

    expand code expand code
    import { Input } from 'choerodon-ui';
    
    ReactDOM.render(
      <div className="example-input">
        <Input size="large" placeholder="large size" label="Large" maxLength="20" />
        <Input placeholder="default size" />
        <Input size="small" placeholder="small size" label="small" />
      </div>,
      mountNode);
    
    用于多行输入。
    expand code expand code
    import { Input } from 'choerodon-ui';
    const { TextArea } = Input;
    
    ReactDOM.render(<TextArea rows={4} maxLength={20} label="textarea" placeholder="textarea usage" />, mountNode);
    

    输入框的组合展现。

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

    expand code expand code
    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: [{
          value: 'zhonghuamen',
          label: 'Zhong Hua Men',
        }],
      }],
    }];
    
    class CompactDemo extends React.Component {
      state = {
        dataSource: [],
      }
    
      handleChange = (value) => {
        this.setState({
          dataSource: !value || value.indexOf('@') >= 0 ? [] : [
            `${value}@gmail.com`,
            `${value}@163.com`,
            `${value}@qq.com`,
          ],
        });
      }
    
      render() {
        return (
          <div>
            <InputGroup size="large">
              <Col span={5}>
                <Input defaultValue="0571" />
              </Col>
              <Col span={8}>
                <Input defaultValue="26888888" />
              </Col>
            </InputGroup>
            <br />
            <InputGroup compact>
              <Input style={{ width: '20%' }} defaultValue="0571" />
              <Input style={{ width: '30%' }} defaultValue="26888888" />
            </InputGroup>
            <br />
            <InputGroup compact>
              <Select defaultValue="Zhejiang">
                <Option value="Zhejiang">Zhejiang</Option>
                <Option value="Jiangsu">Jiangsu</Option>
              </Select>
              <Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
            </InputGroup>
            <br />
            <InputGroup compact>
              <Select defaultValue="Option1">
                <Option value="Option1">Option1</Option>
                <Option value="Option2">Option2</Option>
              </Select>
              <Input style={{ width: '50%' }} defaultValue="input content" />
              <InputNumber />
            </InputGroup>
            <br />
            <InputGroup compact>
              <Input style={{ width: '50%' }} defaultValue="input content" />
              <DatePicker />
            </InputGroup>
            <br />
            <InputGroup compact>
              <Select defaultValue="Option1-1">
                <Option value="Option1-1">Option1-1</Option>
                <Option value="Option1-2">Option1-2</Option>
              </Select>
              <Select defaultValue="Option2-2">
                <Option value="Option2-1">Option2-1</Option>
                <Option value="Option2-2">Option2-2</Option>
              </Select>
            </InputGroup>
            <br />
            <InputGroup compact>
              <Select defaultValue="1">
                <Option value="1">Between</Option>
                <Option value="2">Except</Option>
              </Select>
              <Input style={{ width: 100, textAlign: 'center' }} placeholder="Minimum" />
              <Input style={{ width: 30, borderLeft: 0, pointerEvents: 'none', backgroundColor: '#fff' }} value="~" disabled />
              <Input style={{ width: 100, textAlign: 'center', borderLeft: 0 }} placeholder="Maximum" />
            </InputGroup>
            <br />
            <InputGroup compact>
              <Select defaultValue="Sign Up">
                <Option value="Sign Up">Sign Up</Option>
                <Option value="Sign In">Sign In</Option>
              </Select>
              <AutoComplete
                dataSource={this.state.dataSource}
                style={{ width: 200 }}
                onChange={this.handleChange}
                placeholder="Email"
              />
            </InputGroup>
            <br />
            <InputGroup compact>
              <Select style={{ width: '30%' }} defaultValue="Home">
                <Option value="Home">Home</Option>
                <Option value="Company">Company</Option>
              </Select>
              <Cascader style={{ width: '70%' }} options={options} placeholder="Select Address" />
            </InputGroup>
          </div>
        );
      }
    }
    
    ReactDOM.render(<CompactDemo />, mountNode);
    
    结合 Tooltip 组件,实现一个数值输入框,方便内容超长时的全量展现。
    expand code expand code
    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;
        if (value.charAt(value.length - 1) === '.' || value === '-') {
          onChange({ value: value.slice(0, -1) });
        }
        if (onBlur) {
          onBlur();
        }
      }
    
      render() {
        const { value } = this.props;
        const title = value ? (
          <span className="numeric-input-title">
            {value !== '-' ? formatNumber(value) : '-'}
          </span>
        ) : 'Input a number';
        return (
          <Tooltip
            trigger={['focus']}
            title={title}
            placement="topLeft"
            overlayClassName="numeric-input"
          >
            <Input
              {...this.props}
              onChange={this.onChange}
              onBlur={this.onBlur}
              placeholder="Input a number"
              maxLength="25"
            />
          </Tooltip>
        );
      }
    }
    
    class NumericInputDemo extends React.Component {
      constructor(props) {
        super(props);
        this.state = { value: '' };
      }
    
      onChange = (value) => {
        this.setState({ value });
      }
    
      render() {
        return <NumericInput style={{ width: 120 }} value={this.state.value} onChange={this.onChange} />;
      }
    }
    
    ReactDOM.render(<NumericInputDemo />, mountNode);
    

    API

    Input

    参数 说明 类型 默认值
    addonAfter 带标签的 input,设置后置标签 string|ReactNode
    addonBefore 带标签的 input,设置前置标签 string|ReactNode
    defaultValue 输入框默认内容 string
    disabled 是否禁用状态,默认为 false boolean false
    id 输入框的 id string
    prefix 带有前缀图标的 input string|ReactNode
    size 控件大小。注:标准表单内的输入框大小限制为 large。可选 large default small string default
    suffix 带有后缀图标的 input string|ReactNode
    type 声明 input 类型,同原生 input 标签的 type 属性,见:MDN(请直接使用 Input.TextArea 代替 type="textarea")。 string text
    value 输入框内容 string
    onPressEnter 按下回车的回调 function(e)
    copy 显示复制按钮 boolean false
    onCopy 点击复制按钮的回调 function(copyValue)
    underline input 下划线 boolean true

    如果 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|object
    defaultValue 输入框默认内容 string
    value 输入框内容 string
    onPressEnter 按下回车的回调 function(e)

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

    参数 说明 类型 默认值
    enterButton 是否有确认按钮,可设为按钮文字 boolean|ReactNode false
    onSearch 点击搜索或按下回车键时的回调 function(value)

    其余属性和 Input 一致。

    Input.Group

    参数 说明 类型 默认值
    compact 是否用紧凑模式 boolean false
    size Input.Group 中所有的 Input 的大小,可选 large default small string default
    <Input.Group>
      <Input />
      <Input />
    </Input.Group>