@uiw/react-input v5.0.0-bate-6

Input 输入框

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

import { Input } from 'uiw';
// or
import Input from '@uiw/react-input';

基础用法

import React from 'react';
import { Input } from 'uiw';

const Demo = () => (
  <div>
    <Input placeholder="请输入内容" style={{ maxWidth: 200 }} />
  </div>
);
export default Demo

数字输入框

import React from 'react';
import { InputNumber,Row,Col, Icon, } from 'uiw';

const Demo = () => {

  return(
    <div>
      <Row gutter={10}>
        <Col fixed>
          <InputNumber
            placeholder="请输入内容"
            style={{ width: 200 }}
          />
        </Col>
        <Col fixed style={{ lineHeight: '30px' }}>限制大小</Col>
        <Col fixed>
          <InputNumber
            placeholder="请输入内容"
            style={{ width: 200 }}
            min={1}
            max={10}
          />
        </Col>
        <Col fixed style={{ lineHeight: '30px' }}>超出限界警告</Col>
        <Col fixed>
          <InputNumber
            placeholder="请输入内容"
            style={{ width: 200 }}
            min={1}
            max={10}
            overLimitColor={'red'}
          />
        </Col>
        <Col fixed style={{ lineHeight: '30px' }}>设置步涨值</Col>
        <Col fixed>
          <InputNumber
            placeholder="请输入内容"
            style={{ width: 200 }}
            step={5}
          />
        </Col>
      </Row>
    </div>
  )
};
export default Demo

Form 中使用 Input

import React from 'react';
import { Form, Input, Row, Col, Button, Notify ,InputNumber, Icon,} from 'uiw';

const Demo = () => (
  <Form
    onChange={({ initial, current }) => { }}
    onSubmitError={(error) => {
      console.log('error:', error)
      return error && error.filed ? { ...error.filed } : null;
    }}
    onSubmit={({initial, current}) => {
      if (current.input && current.input.length > 3) {
        Notify.success({
          title: '提交成功！',
          description: `填写：【${current.input.toString()}】！`
        });
      } else {
        Notify.error({ title: '提交失败！', description: '必须长度超过 3 个字符！' });
      }
      const ErrObj = {};
      if (current.input && current.input.length < 4) {
        ErrObj.input = '😆 必须长度超过 3 个字符！';
      }
      if(Object.keys(ErrObj).length > 0) {
        const err = new Error();
        err.filed = ErrObj;
        throw err;
      }
    }}
    fields={{
      input: {
        value: 'www',
        label: '请输入内容',
        help: '必须长度超过 3 个字符！',
        validator: (value = '') => value.length < 4 ? '必填选项！' : null,
        children: <Input placeholder="请输入内容" style={{ maxWidth: 200 }} />,
      },
      inputNumber: {
        value: 'www',
        label: '请输入内容',
        help: '必须长度超过 3 个字符！',
        validator: (value = '') => value.length < 4 ? '必填选项！' : null,
        children: <InputNumber placeholder="请输入内容" style={{ maxWidth: 200 }} />,
      },
    }}
  >
    {({ fields, state, canSubmit }) => {
      return (
        <div>
          <Row>
            <Col>{fields.input}</Col>
          </Row>
          <Row>
            <Col>{fields.inputNumber}</Col>
          </Row>
          <Row>
            <Col>
              <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
            </Col>
          </Row>
          <Row>
            <Col>
              <pre style={{ padding: 10, marginTop: 10 }}>
                {JSON.stringify(state.current, null, 2)}
              </pre>
            </Col>
          </Row>
        </div>
      );
    }}
  </Form>
);

export default Demo

插入图标

import React from 'react';
import { Input, Row, Col,Icon } from 'uiw';

const stylItem = { margin: 20 };
const Demo = () => (
  <div>
    <Row gutter={10}>
      <Col fixed>
        <Input  preIcon= {<Icon type='delete' />} placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input  preIcon= {<Icon type='tag' />}  placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input  preIcon= {<Icon type='picasa' />} placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input  preIcon= {<Icon type='like-o' />} placeholder="请输入内容" />
      </Col>
    </Row>
  </div>
)
export default Demo

后面插入内容

向后面插入 Button 或者 Tag

import React from 'react';
import { Input, Row, Col, Button, Tag,Icon } from 'uiw';

const Demo = () => (
  <div>
    <Row gutter={10}>
      <Col fixed>
        <Input
          preIcon= {<Icon type='like-o' />}
          placeholder="请输入密码"
          addonAfter={<Button icon={ <Icon type="lock" />} size="small" basic type="light" />}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon= {<Icon type='tag' />}
          placeholder="请输入内容"
          addonAfter={<Tag title="1000" color="#28a745" />}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon= {<Icon type='search' />}
          placeholder="请输入内容"
          addonAfter={<Button icon="apple" size="small" type="primary">按钮</Button>}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon= { <Icon type='tag' />}
          placeholder="请输入内容"
          addonAfter={<Button size="small" type="primary">按钮</Button>}
        />
      </Col>
    </Row>
  </div>
)
export default Demo

输入框尺寸

import React from 'react';
import { Input, Row, Col, Tag, Button ,Icon} from 'uiw';

const Demo = () => (
  <div>
    <Row gutter={10} style={{ marginBottom: 10 }}>
      <Col fixed>
        <Input
          preIcon= {<Icon type='like-o' />}
          size="large"
          placeholder="请输入密码"
          addonAfter={<Button icon={<Icon type='lock' />} basic type="light" />}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon= {<Icon type='search' />}
          placeholder="请输入内容"
          addonAfter={<Button icon={<Icon type='arrow-right' />} basic size="small" type="light" />}
        />
      </Col>
      <Col fixed>
        <Input
          size="small"
          preIcon= {<Icon type='tag' />}
          placeholder="请输入内容"
          addonAfter={<Button size="small" type="primary">按钮</Button>}
        />
      </Col>
    </Row>
    <Row gutter={10} style={{ marginBottom: 10 }}>
      <Col fixed>
        <Input
          size="large"
          preIcon= {<Icon type='like-o' />}
          placeholder="请输入密码"
          addonAfter={<Tag title="1000" color="#28a745" />}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon= {<Icon type='tag' />}
          placeholder="请输入内容"
          addonAfter={<Tag title="药丸" color="#1C7CEB" color="#40bf16">丸</Tag>}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon= {<Icon type='tag' />}
          size="small"
          placeholder="请输入内容"
          addonAfter={<Tag title="1000" color="#28a745" />}
        />
      </Col>
    </Row>
    <Row gutter={10} style={{ marginBottom: 10 }}>
      <Col fixed>
        <Input
          preIcon= {<Icon type='like-o' />}
          size="large"
          placeholder="请输入密码"
          addonAfter={<Button  icon={<Icon type='apple' />}  type="primary">按钮</Button>}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon= {<Icon type='search' />}
          placeholder="请输入内容"
          addonAfter={<Button size="small" type="primary">搜索</Button>}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon= {<Icon type='tag' />}
          size="small"
          placeholder="请输入内容"
          addonAfter={<Button size="small" type="primary">按钮</Button>}
        />
      </Col>
    </Row>
    <Row gutter={10} style={{ marginBottom: 10 }}>
      <Col fixed>
        <Input
           preIcon= {<Icon type='like-o' />}
          placeholder="请输入密码"
          addonAfter={<Button size="small" type="light">亮按钮</Button>}
        />
      </Col>
      <Col fixed>
        <Input
          placeholder="请输入内容"
          addonAfter={<Button size="small" type="danger">按钮</Button>}
        />
      </Col>
      <Col fixed>
        <Input
          placeholder="请输入内容"
          addonAfter={<Button size="small" type="warning">按钮</Button>}
        />
      </Col>
    </Row>
    <Row gutter={10}>
      <Col fixed>
        <Input size="small" preIcon={<Icon type='like-o' />} placeholder="请输入密码" />
      </Col>
      <Col fixed>
        <Input size="small" placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input
          size="small"
          preIcon= { <Icon type='like-o' />}
          placeholder="请输入内容"
          addonAfter={<Button size="small" type="warning">按钮</Button>}
        />
      </Col>
    </Row>
  </div>
)
export default Demo

密码输入框

import React from 'react';
import { Input, Row, Col, Button ,Icon} from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      btnIcon: 'lock',
    }
  }
  onClick() {
    this.setState({
      btnIcon: this.state.btnIcon === 'lock' ? 'unlock' : 'lock',
    })
  }
  render() {
    return (
      <Row gutter={10}>
        <Col fixed>
          <Input
            ref={(instance) => {
              if (instance) {
                console.log('instance:', instance);
              }
            }}
            preIcon= { <Icon type='like-o' />}
            type={this.state.btnIcon === 'lock' ? 'password' : 'text'}
            placeholder="请输入密码"
            addonAfter={<Button
             icon={<Icon type={this.state.btnIcon} />}
             onClick={this.onClick.bind(this)}
             size="small"
             basic 
             type="light" />}
          />
        </Col>
      </Row>
    )
  }
}
export default Demo

输入框被禁用

import React from 'react';
import { Icon, Input, Row, Col,Button} from 'uiw';

const stylItem = { margin: 20 };
const Demo = () => (
  <>
    <Row gutter={10}>
      <Col fixed>
        <Input disabled preIcon={<Icon type="delete" />} placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input disabled preIcon={<Icon type="tag" />} placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input
          disabled
          preIcon={<Icon type="picasa" />}
          placeholder="请输入内容"
          addonAfter={
            <Button icon={<Icon type="close" />} disabled size="small" basic type="light" />
          }
        />
      </Col>
      <Col fixed>
        <Input disabled  preIcon={<Icon type="like-o" />}  placeholder="请输入内容" />
      </Col>
    </Row>
  </>
);
export default Demo

Input

InputNumber

在v4.18.2中增加

更多属性文档请参考 Input。