Naughty Platypus Memorabilia

    @uiw/react-select
    TypeScript icon, indicating that this package has built-in type declarations

    4.9.7 • Public • Published

    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

    Install

    npm i @uiw/react-select

    DownloadsWeekly Downloads

    229

    Version

    4.9.7

    License

    MIT

    Unpacked Size

    34.1 kB

    Total Files

    28

    Last publish

    Collaborators

    • wcjiang