基本

TagsInput组件基于ChipsInput(基于InputBase)和Combobox构建, 功能上就像是AutoComponent和MultiSelect的混合体, 既能提供下列建议列表和自由输入, 也渲染为一个个的Chip.

TagsInput组件继承了InputBase和Combobox的功能, 本文档没有包含所有用例, 详细请查看Input和Combobox文档

使用

受控与非受控模式

TagsInput的 value属性为受控属性, defaultValue属性为非受控属性. onChange是回调属性.

注意: value属性必须是字符串数组, 其它类型不受支持. onChange函数的参数也是字符串数组.

下拉建议列表

和AutoComplete组件一样, 使用TagsInput的data属性可以实现带下拉建议列表, 同时可以自由输入.

Data 格式

TagsInput的data属性与AutoComplete的data属性相同, 支持下列格式:

字符串数组:

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

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

分组对象数组, 分组对象包含group, items键, items的值为字符串数组:

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

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

分片字符

默认的, TagsInput使用逗号(,)作为分片字符, 可以通过splitChars属性修改.

注意: splitChars属性中的字符将不可作为最终的输入值, 因此需谨慎选择.

splitChars同时支持输入和粘贴操作, 输入时作为分片确认键, 粘贴时会根据splitChars属性进行分片.

tips: 输入时键盘的Enter键也可作为分片确认键.

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

function Demo() {
  return (
    <TagsInput
      label="Press Enter to submit a tag"
      placeholder="Enter tag"
      splitChars={[",", ";"]}
    />
  );
}

renderOption

renderOption回调属性允许你自定义option的渲染. 它会被传递一个对象, 包含解析后的option对象. 这个函数必须返回一个React node.

用在Popover内

嵌套Popover要求子Popover必须禁用withPortal属性. 如果Portal没有被禁用, 点击子Popover外部会关闭嵌套的所有Popover

所有基于Combobox的组件(间接基于Popover), 如AutoComplete,Select,MultiSelect, TagsInput内部都使用了Popover, 以及直接基于Popover构建的组件, 如Tooltip组件, 这些组件用在Popover组件内, 必须设置它们的withPortal属性为false

import { Button, Popover, Select } from "@rtdui/core";

function Demo() {
  return (
    <Popover width={300} position="bottom" withArrow shadow="md">
      <Popover.Target>
        <Button>Toggle popover</Button>
      </Popover.Target>
      <Popover.Dropdown>
        <AutoComplete
          comboboxProps={{ withinPortal: false }} // 基于Combobox的通过comboboxProps.withinPortal禁用
          label="DatePickerInput within Popover"
          placeholder="DatePickerInput within Popover"
          data={["React", "Angular", "Svelte", "Vue"]}
        />
        <Select
          comboboxProps={{ withinPortal: false }} // 基于Combobox的通过comboboxProps.withinPortal禁用
          label="Select within Popover"
          placeholder="Select within Popover"
          data={["React", "Angular", "Svelte", "Vue"]}
        />
        <MultiSelect
          comboboxProps={{ withinPortal: false }} // 基于Combobox的通过comboboxProps.withinPortal禁用
          label="Select within Popover"
          placeholder="Select within Popover"
          data={["React", "Angular", "Svelte", "Vue"]}
        />
        <TagsInput
          comboboxProps={{ withinPortal: false }} // 基于Combobox的通过comboboxProps.withinPortal禁用
          label="Select within Popover"
          placeholder="Select within Popover"
          data={["React", "Angular", "Svelte", "Vue"]}
        />
        <Tooltip
          withinPortal={false} // 直接基于Popover的通过withinPortal禁用
          tip="click me"
        >
          <button></button>
        </Tooltip>
      </Popover.Dropdown>
    </Popover>
  );
}