跳到主要内容

Select
就绪
Storybook

Select 组件是一个可定制的选择输入框组件，允许用户从下拉列表中选择一个或多个选项。它构建在 react-select 库之上。

何时使用​

当有大量选项可供选择时，此组件特别有用。此外，如果选项多于 4 个，考虑使用 Select 而不是单选按钮组件。

类型和行为​

基本 Select​

Select 组件可用于创建基本的选择输入框，允许用户从下拉列表中选择一个选项。可以使用 isClearable prop 清除选定的值。可以使用 isLoading prop 指示选择输入框处于加载状态。

加载中...
在线编辑器
const Basic = () => {
  const [value, setValue] = React.useState<SelectableValue<string>>();
  const options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];

  return (
    <Container>
      <Select
        options={options}
        value={value}
        onChange={(v) => {
          setValue(v);
        }}
      />
    </Container>
  );
};

render(<Basic />);

多选 Select​

Select 组件可以配置为允许用户从下拉列表中选择多个选项。必须将 isMulti prop 设置为 true 来启用此行为。可以使用 maxVisibleValues prop 限制显示的选定值数量。可以使用 showAllSelectedWhenOpen prop 在下拉列表打开时显示所有选定的值。

异步 Select​

Select 组件可以配置为允许用户从异步填充的下拉列表中选择一个或多个选项。必须将 loadOptions prop 设置为一个函数，该函数返回一个 Promise，该 Promise 解析为一个选项数组。可以使用 defaultOptions prop 提供在用户开始输入之前显示的选项。在这种情况下，选项会在组件挂载时加载。可以使用 cacheOptions prop 缓存异步加载的选项。

加载中...
在线编辑器
const loadAsyncOptions = (inputValue: string) => {
  return new Promise<Array<SelectableValue<string>>>((resolve) => {
    setTimeout(() => {
      resolve([
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', value: '2' },
        { label: 'Option 3', value: '3' },
      ]);
    }, 1000);
  });
};

const BasicSelectAsync = () => {
  const [value, setValue] = React.useState<SelectableValue<string>>();

  return (
    <Container>
      <AsyncSelect loadOptions={loadAsyncOptions} defaultOptions value={value} onChange={setValue} />
    </Container>
  );
};

render(<BasicSelectAsync />);

创建自定义值​

Select 组件可以配置为允许用户创建新选项。必须将 allowCustomValue prop 设置为 true 来启用此行为。此外，必须将 onCreateOption prop 设置为一个函数，该函数在用户创建新选项时调用。

加载中...
在线编辑器
const CustomValueCreation = () => {
  const [value, setValue] = React.useState<SelectableValue<string>>();
  const [customOptions, setCustomOptions] = React.useState<Array<SelectableValue<string>>>([]);
  const options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];
  return (
    <Container>
      <Select
        options={[...options, ...customOptions]}
        value={value}
        onChange={(v) => {
          setValue(v);
        }}
        allowCustomValue
        onCreateOption={(v) => {
          const customValue: SelectableValue<string> = { value: v, label: v };
          setCustomOptions([...customOptions, customValue]);
          setValue(customValue);
        }}
      />
    </Container>
  );
};

render(<CustomValueCreation />);

虚拟化选项列表​

Select 组件可以配置为使用虚拟化选项列表。必须将 virtualized prop 设置为 true 来启用此行为。可以使用 maxVisibleValues prop 限制显示的选定值数量。可以使用 showAllSelectedWhenOpen prop 在下拉列表打开时显示所有选定的值。可以使用 isClearable prop 清除选定的值。可以使用 isLoading prop 指示选择输入框处于加载状态。

向 Select 添加图标​

可以使用 prefix prop 向 Select 添加自定义图标，该图标将显示在选定值之前。

加载中...
在线编辑器
const SelectWithIcon = () => {
  const [value, setValue] = React.useState<SelectableValue<string>>();
  return (
    <Container>
      <Select
        options={[
          { label: 'Option 1', value: '1' },
          { label: 'Option 2', value: '2' },
          { label: 'Option 3', value: '3' },
        ]}
        value={value}
        onChange={setValue}
        prefix={<Icon name={'arrow-down'} />}
      />
    </Container>
  );
};

render(<SelectWithIcon />);

演练场​