Package Exports

@uiw/react-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Input 输入框

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

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

基础用法

import ReactDOM from 'react-dom';
import { Input } from 'uiw';

const Demo = () => (
  <div>
    <Input placeholder="请输入内容" style={{ maxWidth: 200 }} />
  </div>
);
ReactDOM.render(<Demo />, _mount_);

Form 中使用 Input

import ReactDOM from 'react-dom';
import { Form, Input, Row, Col, Button, Notify } 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 }} />,
      },
    }}
  >
    {({ fields, state, canSubmit }) => {
      return (
        <div>
          <Row>
            <Col>{fields.input}</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>
);

ReactDOM.render(<Demo />, _mount_);

插入图标

import ReactDOM from 'react-dom';
import { Input, Row, Col } from 'uiw';

const stylItem = { margin: 20 };
const Demo = () => (
  <div>
    <Row gutter={10}>
      <Col fixed>
        <Input preIcon="delete" placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input preIcon="tag" placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input preIcon="picasa" placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input preIcon="like-o" placeholder="请输入内容" />
      </Col>
    </Row>
  </div>
)
ReactDOM.render(<Demo />, _mount_);

后面插入内容

向后面插入 Button 或者 Tag

import ReactDOM from 'react-dom';
import { Input, Row, Col, Button, Tag } from 'uiw';

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

输入框尺寸

import ReactDOM from 'react-dom';
import { Input, Row, Col, Tag, Button } from 'uiw';

const Demo = () => (
  <div>
    <Row gutter={10} style={{ marginBottom: 10 }}>
      <Col fixed>
        <Input
          preIcon="like-o"
          size="large"
          placeholder="请输入密码"
          addonAfter={<Button icon="lock" basic type="light" />}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon="search"
          placeholder="请输入内容"
          addonAfter={<Button icon="arrow-right" basic size="small" type="light" />}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon="tag"
          size="small"
          placeholder="请输入内容"
          addonAfter={<Button size="small" type="primary">按钮</Button>}
        />
      </Col>
    </Row>
    <Row gutter={10} style={{ marginBottom: 10 }}>
      <Col fixed>
        <Input
          preIcon="like-o"
          size="large"
          placeholder="请输入密码"
          addonAfter={<Tag title="1000" color="#28a745" />}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon="tag"
          placeholder="请输入内容"
          addonAfter={<Tag title="药丸" color="#1C7CEB" color="#40bf16">丸</Tag>}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon="tag"
          size="small"
          placeholder="请输入内容"
          addonAfter={<Tag title="1000" color="#28a745" />}
        />
      </Col>
    </Row>
    <Row gutter={10} style={{ marginBottom: 10 }}>
      <Col fixed>
        <Input
          preIcon="like-o"
          size="large"
          placeholder="请输入密码"
          addonAfter={<Button icon="apple" type="primary">按钮</Button>}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon="search"
          placeholder="请输入内容"
          addonAfter={<Button size="small" type="primary">搜索</Button>}
        />
      </Col>
      <Col fixed>
        <Input
          preIcon="tag"
          size="small"
          placeholder="请输入内容"
          addonAfter={<Button size="small" type="primary">按钮</Button>}
        />
      </Col>
    </Row>
    <Row gutter={10} style={{ marginBottom: 10 }}>
      <Col fixed>
        <Input
          preIcon="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="like-o" placeholder="请输入密码" />
      </Col>
      <Col fixed>
        <Input size="small" placeholder="请输入内容" />
      </Col>
      <Col fixed>
        <Input
          size="small"
          preIcon="like-o"
          placeholder="请输入内容"
          addonAfter={<Button size="small" type="warning">按钮</Button>}
        />
      </Col>
    </Row>
  </div>
)
ReactDOM.render(<Demo />, _mount_);

密码输入框

import React from 'react';
import ReactDOM from 'react-dom';
import { Input, Row, Col, Button } 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="like-o"
            type={this.state.btnIcon === 'lock' ? 'password' : 'text'}
            placeholder="请输入密码"
            addonAfter={<Button icon={this.state.btnIcon} onClick={this.onClick.bind(this)} size="small" basic type="light" />}
          />
        </Col>
      </Row>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

输入框被禁用

import ReactDOM from 'react-dom';
import { Icon, Input, Row, Col} from 'uiw';

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

Input

参数	说明	类型	默认值
value	绑定值	String	-
disabled	禁用输入框	Boolean	`false`
preIcon	输入框`前`面放置图标	String/ReactNode	-
addonAfter	带标签的 input，设置后置标签	String/ReactNode	-
size	指定输入框的尺寸，除了默认的大小外，还提供了 `large`、`small` 和 `default` 三种尺寸。	String	-