@uiw/react-select

Select component

Usage no npm install needed!

<script type="module">
  import uiwReactSelect from 'https://cdn.skypack.dev/@uiw/react-select';
</script>

README

Select 选择器

当选项过多时,使用下拉菜单展示并选择内容。

import { Select } from 'uiw';
// or
import Select from '@uiw/react-select';

基础用法

适用广泛的基础单选 value 的值为当前被选中的 Optionvalue 属性值。自定义 Select 请查看 <Dropdown /> 组件实例。

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

const Demo = () => (
  <Row>
    <Col fixed>
      <Select defaultValue="w">
        <Select.Option value="w">Choose an item...</Select.Option>
        <Select.Option value="1">One</Select.Option>
        <Select.Option value="2">Two</Select.Option>
        <Select.Option value="3">Three</Select.Option>
        <Select.Option value="4">Four</Select.Option>
      </Select>
    </Col>
  </Row>
);
ReactDOM.render(<Demo />, _mount_);

禁用选择器

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

const Demo = () => (
  <Row>
    <Col fixed>
      <Select disabled defaultValue="3">
        <Select.Option value="w">Choose an item...</Select.Option>
        <Select.Option value="1">One</Select.Option>
        <Select.Option value="2">Two</Select.Option>
        <Select.Option value="3">Three</Select.Option>
        <Select.Option value="4">Four</Select.Option>
      </Select>
    </Col>
  </Row>
);
ReactDOM.render(<Demo />, _mount_);

尺寸

通过 size 属性设置选择器的尺寸,提供三个尺寸参数设置。

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

const rowSty = { marginBottom: 10 };
const Demo = () => (
  <div>
    <Row gutter={10}>
      <Col fixed>
        <Select size="small" disabled defaultValue="3" style={rowSty}>
          <Select.Option value="w">Choose an item...</Select.Option>
          <Select.Option value="1">One</Select.Option>
          <Select.Option value="2">Two</Select.Option>
          <Select.Option value="3">Three</Select.Option>
          <Select.Option value="4">Four</Select.Option>
        </Select>
      </Col>
      <Col fixed>
        <Button size="small">小尺寸</Button>
      </Col>
    </Row>
    <Row gutter={10} style={rowSty}>
      <Col fixed>
        <Select defaultValue="3">
          <Select.Option value="w">Choose an item...</Select.Option>
          <Select.Option value="1">One</Select.Option>
          <Select.Option value="2">Two</Select.Option>
          <Select.Option value="3">Three</Select.Option>
          <Select.Option value="4">Four</Select.Option>
        </Select>
      </Col>
      <Col fixed>
        <Button size="default">默认尺寸</Button>
      </Col>
    </Row>
    <Row gutter={10}>
      <Col fixed>
        <Select size="large" defaultValue="3">
          <Select.Option value="w">Choose an item...</Select.Option>
          <Select.Option value="1">One</Select.Option>
          <Select.Option value="2">Two</Select.Option>
          <Select.Option value="3">Three</Select.Option>
          <Select.Option value="4">Four</Select.Option>
        </Select>
      </Col>
      <Col fixed>
        <Button size="large">大尺寸</Button>
      </Col>
    </Row>
  </div>
);
ReactDOM.render(<Demo />, _mount_);

选项组

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

const Option = Select.Option;
const Group = Select.Group;

const Demo = () => (
  <Row>
    <Col fixed>
      <Select defaultValue="w">
        <Option value="w">Choose an item...</Option>
        <Group label="Group 1">
          <Option value="1">One</Option>
          <Option value="2">Two</Option>
        </Group>
        <Group label="Group 2">
          <Option value="3">Three</Option>
          <Option value="4">Four</Option>
        </Group>
      </Select>
    </Col>
  </Row>
);
ReactDOM.render(<Demo />, _mount_);

在表单中使用

<Form /> 表单中应用 <Select /> 组件

import ReactDOM from 'react-dom';
import { Form, Row, Col, Select, Button, Notify } from 'uiw';

const Demo = () => (
  <div>
    <Form
      onSubmitError={(error) => {
        if (error.filed) {
          return { ...error.filed };
        }
        return null;
      }}
      onSubmit={({initial, current}) => {
        const errorObj = {};
        if (!current.selectField) {
          errorObj.selectField = '默认需要选择内容,选择入内容';
        }
        if(Object.keys(errorObj).length > 0) {
          const err = new Error();
          err.filed = errorObj;
          Notify.error({ title: '提交失败!', description: '请确认提交表单是否正确!' });
          throw err;
        }
        Notify.success({
          title: '提交成功!',
          description: `表单提交成功,选择值为:${current.selectField},将自动填充初始化值!`,
        });
      }}
      fields={{
        selectField: {
          children: (
            <Select>
              <Select.Option value="w">Choose an item...</Select.Option>
              <Select.Option value="1">One</Select.Option>
              <Select.Option value="2">Two</Select.Option>
              <Select.Option value="3">Three</Select.Option>
              <Select.Option value="4">Four</Select.Option>
            </Select>
          )
        },
      }}
    >
      {({ fields, state, canSubmit }) => {
        return (
          <div>
            <Row>
              <Col fixed>{fields.selectField}</Col>
            </Row>
            <Row>
              <Col fixed>
                <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>
  </div>
)
ReactDOM.render(<Demo />, _mount_);

HTML select

这个组件是最简单的基础样式组件,可以直接引用样式,使用 w-select 纯样式即可达到效果,下拉框右边箭头效果通过样式更改,通过 b64 工具,转换成 base64 格式。

import 'uiw/lib/esm/select/style/index.less';
import ReactDOM from 'react-dom';
import { Row, Col, Select } from 'uiw';

const Demo = () => (
  <Row style={{ backgroundColor: '#fff', margin: -15, padding: 15, borderRadius: '5px 5px 0 0' }} gutter={10}>
    <Col fixed>
      <select className="w-select" defaultValue="w">
        <option value="w">Choose an item...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
      </select>
    </Col>
    <Col fixed>
      <select disabled className="w-select" defaultValue="w">
        <option value="w">Choose an item...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
      </select>
    </Col>
  </Row>
);
ReactDOM.render(<Demo />, _mount_);

Select

参数 说明 类型 默认值
value 控制时 select 的值必须与 onChange 函数一起使用才能更新 select 的值 Any -
disabled 禁用选择器 Boolean false
defaultValue 根据 value 进行比较,判断是否选中 Any -
size 选择框尺寸 Enum {large, default, small } default