• 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是否禁用状态,默认为 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
    onPressEnter按下回车的回调function(e)
    copy显示复制按钮booleanfalse
    onCopy点击复制按钮的回调function(copyValue)
    underlineinput 下划线booleantrue

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

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

    Input.TextArea

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

    参数说明类型默认值
    autosize自适应内容高度,可设置为 `truefalse或对象:{ minRows: 2, maxRows: 6 }`boolean|object
    defaultValue输入框默认内容string
    value输入框内容string
    onPressEnter按下回车的回调function(e)

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

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

    其余属性和 Input 一致。

    Input.Group

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