使用

在有些情况下, 尤其只针对移动端的应用(如小程序), 你可能倾向于使用原生的下拉选项. 这种场景下可以使用NativeSelect组件. 它使用原生的option元素作为下拉选项, 但提供了额外的功能.

NativeSelect组件也是基于InputBase构建, Input的功能全部支持, 本文档没有包含所有的功能和用例, 详细请查看Input文档.

NativeSelect支持两种形式提供选项:

• 通过data属性传递数组
• 原生option作为children

注意: 如果children被使用, 则data属性会被忽略

选项1: data属性设置选项

NativeSelect的data属性和Select组件一样支持字符串数组和对象数组.

1. data属性为字符串数组

import { NativeSelect } from "@rtdui/core";

function Demo() {
  return <NativeSelect data={["React", "Angular", "Svelte", "Vue"]} />;
}

2. data属性为对象数组

import { NativeSelect } from "@rtdui/core";

function Demo() {
  return (
    <NativeSelect
      data={[
        { label: "React", value: "react" },
        { label: "Angular", value: "angular" },
        { label: "Svelte", value: "svelte", disabled: true },
        { label: "Vue", value: "vue" },
      ]}
    />
  );
}

data属性支持选项分组

NativeSelect的data属性和Select组件一样支持选项分组.

1. 选项分组(字符串形式)

import { NativeSelect } from "@rtdui/core";

function Demo() {
  return (
    <NativeSelect
      data={[
        {
          group: "Frontend libraries",
          items: ["React", "Angular", "Svelte", "Vue"],
        },
        {
          group: "Backend libraries",
          items: ["Express", "Koa", "Django"],
        },
      ]}
    />
  );
}

2. 选项分组(对象形式)

import { NativeSelect } from "@rtdui/core";

function Demo() {
  return (
    <NativeSelect
      data={[
        {
          group: "Frontend libraries",
          items: [
            { label: "React", value: "react" },
            { label: "Angular", value: "angular" },
            { label: "Vue", value: "vue", disabled: true },
          ],
        },
        {
          group: "Backend libraries",
          items: [
            { label: "Express", value: "express" },
            { label: "Koa", value: "koa" },
            { label: "Django", value: "django" },
          ],
        },
      ]}
    />
  );
}

选项2: 原生option作为children

这种方式最接近原生select的使用方式:

import { NativeSelect } from "@rtdui/core";

function Demo() {
  return (
    <NativeSelect label="With children options">
      <optgroup label="Frontend libraries">
        <option value="react">React</option>
        <option value="angular">Angular</option>
        <option value="vue" disabled>
          Vue
        </option>
      </optgroup>

      <optgroup label="Backend libraries">
        <option value="express">Express</option>
        <option value="koa">Koa</option>
        <option value="django">Django</option>
      </optgroup>
    </NativeSelect>
  );
}